POST multipart/form-data using file path

Is there a way to do POST request with multipart/form-data without selecting the file manually by using file input, but giving already known local file path? As I’ve read - because of security measures you cannot specify the local path without using file input. Are there alternative ways to deliver the file with other form data with one request?

1 Like

Hi Reinis,

Did you solve this problem ? Because I had a same issue and seems to I got stuck here :pensive:

Use cordova file transfer plugin:

url = “”;
filepath = "file://…/image.jpg"
var options = {
fileKey: “myImage”,
httpMethod: “POST”,
mimeType: “image/jpeg”,
params: {myDescription: “bla bla”, rating: 5},
chunkedMode: true

$cordovaFileTransfer.upload(url, filepath, options, true).then(function(…){…});

Hi Reinis,

Thanks for your help.This way I can push image to web service but this time I cannot take params values at server side. I am using node.js and express.js based web service. All data of image can come with request but params field never came. I tried one up object (I mean req.body or req.file even req) and params at nowhere.

Which server side technology you are using and how can get params value field ?


you can get the file via cordova file plugin and add it with the javascript FormData-API

Ok, how can I combine these two things. You are saying, put form Data object to cordova file plugin params values ?

nope if you are using file-transfer plugin you do not need the FormData --> but you need the valid path to the local file, which you can get via file-plugin (requestLocalFileSystem --> getFile):

//mobile upload
var ft = new FileTransfer(),
    ftOptions = new FileUploadOptions();

ftOptions.fileKey = 'file';
ftOptions.fileName = PATH.substr(params.lastIndexOf('/') + 1); // extract file name from PATH
ftOptions.mimeType = 'image/jpeg';
ftOptions.httpMethod = 'POST';

ft.upload(PATH, UPLOADURL, function (res) {
  //upload success
}, function () {
  //upload failed
}, ftOptions);

If you want to upload files via a direct POST-Request your need to create formData-object set contenttype to ‘application/x-www-form-urlencoded’. But i think this will only work on non-mobile environment

//DEVICE: cordova-plugin-file-transfer // camera FILE_URI 
function win() {
function fail() {
   console.log("not uploaded");

let filename = result.nativeURL.substr(result.nativeURL.lastIndexOf("/") + 1); 
let options = new FileUploadOptions();
options.fileKey = "myfile";
options.fileName = filename;
options.mimeType = "image/jpeg";

let params = {
      filename: "myfilename.jpg",
      folder: "myFolder"
options.params = params;

let ft = new FileTransfer();
ft.upload(result.nativeURL, "http://SERVERIP:PORT/file/upload", win, fail, options);

//BROWSER camera-api-mock for browser
private getPicture(successCallback: any, errorCallback: any, options: any): void {
   var callDialog = function(dialog, callback) {
      dialog.addEventListener("change", function() {
      }, false);;
   var acceptTypes: any = ".jpg";
   var dialog = document.createElement("input");
   dialog.type = "file";
   if (angular.isArray(acceptTypes)) {
      dialog.accept = acceptTypes.join(",");
   } else if (angular.isString(acceptTypes)) {
      dialog.accept = acceptTypes;
  callDialog(dialog, successCallback);
//and then:
let formData = new FormData();
formData.append("filename", "myVarFilename.jpg"); //filename first, otherwise req.body is empty in multer
formData.append("folder", "myFolder");
formData.append("myfile", dialog.files[0]); //dialog is the result from camera-api-mock
   url: "http://SERVERIP:PORT/file/upload", 
   method: "POST",
   data: formData,
   headers: {"Content-Type": undefined}
}).then(() => {
}).catch(() => {

//SERVERSIDE Nodejs/express 4 with multer
let multer = require ("multer");
let mkdirp = require ("mkdirp");
app.use(bodyparser.urlencoded({extended: false}));

let imagestorage = multer.diskStorage({
  destination: (req, file, cb) => {
    let newDestination = path.resolve(__dirname, "uploads", "images", req.body.folder);
    cb (null, newDestination);
  filename: (req, file, cb) => {
    let getFileExt = (fileName) => {
        var fileExt = fileName.split(".");
        if ( fileExt.length === 1 || ( fileExt[0] === "" && fileExt.length === 2 ) ) {
            return "";
        return fileExt.pop();
    cb(null, req.body.filename); // + "_" + + "." + getFileExt(file.originalname));
let multerUpload = multer({ storage: imagestorage }).single("myfile");
..."file/upload", (req: any, res: any) => {
   console.log("look into uploads-folder ;-)");
   console.log(req.body); //params in here...
   console.log(req.file); //saved file information

Yes U r right it will work only in non-mobile environment.

Solutions to this? I’m with the same problem. Using I get error 3

hi can u please suggest me something on this below code => {
      if ('android') && sourceType === {
          .then(filePath => {                  

the below is upload

 let body: string = JSON.stringify({'formData': this.formData});
    // type: 'application/json',        
    let headers: any = new Headers({'Content-Type': 'multipart/form-data'}),
      options: any = new RequestOptions({ headers: headers }),
      url: any = this.uploadUrl;,this.formData, options).map(res => res.json())
      .subscribe((data) => {