In electron, how to upload a file from it's full filename

Question

In my electron app I have a button that says "upload contract".

When clicked it looks from the stored contract's filename ie. /home/users/filename.docx and gets it (no need for a dialog window).

Now, I have problems uploading this file as a multipart form data while using axios.

I've read about this issue, asking for file upload on axios which led to this pull request for file upload on browser and this pull for uploading in node.js.

I've read through the issues and comments applying bit by bit but seems to have troubles getting the real file uploading right using axios.

Here is what I have been doing.

Upload as browser

export function generateContract(fileUrl, customer) {
    const data = new FormData()
    const file = fs.createReadStream(fileUrl)

    data.append('names', customer.names)
    data.append('email', customer.email)
    data.append('contract', file)

    return data
}

//- In between generateContract & uploadFile function some function
//- gets the generatedContract data & push it to uploadFile for axios uploading.

//- In API file.

export function uploadFile(formData) {
    return checkConnetion()
        .then(() => {
            return axios.post(emailUrl, formData)
        })
        .catch(() => {
            return axios.post(emailUrlOffline, formData)
        })
}

In generatedContract I'm using FormData that (I assume) is a global function in browsers to create a form instance for uploading files.

I'm also using fs.createReadStream cause without it my file upload looks like an object with three strings (the fileUrl gets to be a normal string).

However, uploading like this and console.loging my request body from my local server I get a hopeless

{ names: 'Mwajuma Salmin',
  email: '[email protected]',
  contract: '[object Object]' }

The contract file is `[object Object]'.

Uploading as node.js

Everything is the same, except I'm using npm's form-data.

Output is.

{ '[object FormData]': '' }

Where am I messing up?

I tried uploading with postman and manually selected the file to upload as form-data and that other data (email & names), it was all successful!

Output.

{ names: 'maotora',
  contract:
   [ File {
       domain: null,
       _events: {},
       _eventsCount: 0,
       _maxListeners: undefined,
       size: 11609,
       path: '/tmp/upload_0af5c038e147888f0a7b89ad4784a4dc',
       name: 'Don Joe_08-06-17\'s_contract-for Plot 011.pdf',
       type: 'application/pdf',
       hash: null,
       lastModifiedDate: 2017-09-28T18:56:31.083Z,
       _writeStream: [Object] } ] }

I can't use form uploading in the app (just the button to upload without opening a dialog to select file) I only have the filename to the file.

Thanks.

Answer 1

This question has been open for a sometime since I couldn't solve the issue with axios and had to use superagent for a while.

However, now that it's solved and can use axios just fine, this is how I did solved it on my project.

//- Correctly placing a file_Url into FormData

export function generateContract(url, {names, email}) {
    const file = {
        uri: url,
        name: _.replace(url, /\.[doc,docx,odt,]+$/, ''),
        type: 'docx'
    }

    const formData = new FormData()
    formData.append('contract', file)
    formData.append('names', names)
    formData.append('email', email)

    return formData
}

//- 1. Calling generateContract method
//- 2. Passing the formdata (from method 1) to sendEmail

const contractData = generateContract(contractUrl, payload)
const response = yield sendEmail(contractData)


//- The sendEmail function that makes requests using axios

export function sendEmail(contractData) {
    return checkConnetion()
        .then(() => {
            return axios.post(emailUrl, contractData)
        })
        .catch(() => {
            // return axios.post(emailUrlOffline, contractData)
            userLog('Cannot connect to server, check your internet settings.', 'Connection Error', 'error')
        })
}