When I am developing my Music Player App, I plan to add a function that users can upload music files from their computer to the Music Player App without using a USB wire. The most common implementation is running a web server on the mobile phone, and open the website on the computer.
The website has an upload file webpage, users can upload files to the server.
Dependency:
WebServer:
- react-native-http-bridge-refurbished(modified version for file uploading)
- https://github.com/birdofpreyru/react-native-static-server
- https://github.com/futurepress/react-native-static-server
I need a web server not only serving static contents but also handling POST requests and support multipart-data, so non of these libraries satisfied my requirements. I need to combine them together. It’s a little complicated, will take some time.
Upload website: React, TypeScript, Vite, Tailwind CSS, npm
Dev Logs:
2025-10-05
Choose react-native-http-bridge-refurbished as the base code, add upload-file and static file server features on it.
I forked the git repo, my repo is: https://github.com/andy380743909/react-native-http-bridge-refurbished
- Add a init param ‘root’ to server class
export class BridgeServer {
public static server: BridgeServer;
public serviceName: string;
private callbacks: HttpCallbackContainer<any>[];
constructor(root?: string, serviceName: string, devMode?: boolean);
public get(url: string, callback: HttpCallback<any>);
public post<T>(url: string, callback: HttpCallback<T>);
public put<T>(url: string, callback: HttpCallback<T>);
public delete<T>(url: string, callback: HttpCallback<T>);
public patch<T>(url: string, callback: HttpCallback<T>);
public use(callback: HttpCallback<any>);
public listen(port: number);
public stop();
}There are three parts to modify, TypeScript, Android and iOS
2. Add files and fields properties to Request class, so we can access the files uploaded to server
export type UploadedFile = {
fieldName: string;
fileName: string;
tempPath: string;
};
export type RawRequest = {
requestId: string;
postData?: {};
type: string;
url: string;
fields?: { [key: string]: string };
files?: UploadedFile[];
};3 Android Native Module
//file server
api 'org.nanohttpd:nanohttpd:2.3.1'
api 'org.nanohttpd:nanohttpd-apache-fileupload:2.3.1'
api 'javax.servlet:javax.servlet-api:4.0.1'add fileupload dependency
It’s very important that api 'javax.servlet:javax.servlet-api:4.0.1' is also needed. Because the fileupload module dependent on it.
2025-10-06
iOS Pod Install Issue
When add my local react-native-http-bridge-refurbished as dependency, I can not successfully pod install.
Error is:
Resolving dependencies of Podfile
[!] CocoaPods could not find compatible versions for pod "react-native-http-bridge-refurbished":
In Podfile:
react-native-http-bridge-refurbished (from ../node_modules/react-native-http-bridge-refurbished)
None of your spec sources contain a spec satisfying the dependency: react-native-http-bridge-refurbished (from ../node_modules/react-native-http-bridge-refurbished).
You have either:
* mistyped the name or version.
* not added the source repo that hosts the Podspec to your Podfile.
/Users/andy/.rvm/gems/ruby-3.2.2/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:317:in raise_error_unless_state'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:299:in block in unwind_for_conflict'
<internal:kernel>:90:in tap'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:297:in unwind_for_conflict'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:257:in process_topmost_state'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/molinillo-0.8.0/lib/molinillo/resolution.rb:182:in resolve'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/molinillo-0.8.0/lib/molinillo/resolver.rb:43:in resolve'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/resolver.rb:94:in resolve'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/installer/analyzer.rb:1082:in block in resolve_dependencies'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/user_interface.rb:64:in section'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/installer/analyzer.rb:1080:in resolve_dependencies'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/installer/analyzer.rb:125:in analyze'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/installer.rb:422:in analyze'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/installer.rb:244:in block in resolve_dependencies'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/user_interface.rb:64:in section'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/installer.rb:243:in resolve_dependencies'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/installer.rb:162:in install!'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/command/install.rb:52:in run'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/claide-1.1.0/lib/claide/command.rb:334:in run'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/lib/cocoapods/command.rb:52:in run'
/Users/andy/.rvm/gems/ruby-3.2.2/gems/cocoapods-1.16.2/bin/pod:55:in <top (required)>'
/Users/andy/.rvm/gems/ruby-3.2.2/bin/pod:25:in load'
/Users/andy/.rvm/gems/ruby-3.2.2/bin/pod:25:in <main>'
/Users/andy/.rvm/gems/ruby-3.2.2/bin/ruby_executable_hooks:22:in eval'
/Users/andy/.rvm/gems/ruby-3.2.2/bin/ruby_executable_hooks:22:in `<main>'I have checked everything, the podspec file, the Podfile, the package.json, they are looks valid.
After 2 days hard work, finally I tried to change the version which is ‘0.0.0-development’ to ‘0.0.1’, It seems work now, I can pod install successfully. But it now have another issue.
I move the ‘react-native’ dependency to peerDependency, and remove the node_modules folder in this library, then reinstall this module, it still not work.
I also tried yarn add from git, still not work.
The wrong structure, I don’t know whether it is because I use yarn add link:./xxx/xxx/react-native-http-bridge-refurbished, or yarn link “react-native-http-bridge-refurbished”
Finally, I npm pack my project, and add it using:
yarn add /Users/andy/Projects/react-native-http-bridge-refurbished/react-native-http-bridge-refurbished-2.0.0.tgzthen I can pod install, and build the iOS project, and can execute the http server typescript code.
But it has another issue now,
This is because metro cache, clean the cache can resolve this issue.
rm -rf $TMPDIR/metro-*