0

I'm a newbie to JavaScript and I'm planning to create a function that parses a CSV file with links (absolute paths) to image and audio files locally stored, but I'm getting stuck on getting the local file and send it to the backend for upload, so I was hoping to get some help. I'm trying to retrieve the object pointed by the path and convert into a file upload object similar to an object created when a user chooses a file to upload (in an file input element) so when I add it to the FormData it parses it as a file. I looked at Blob objects but I'm not sure how I can use that for my case.

This is what I have so far. data is the object from papaparse that contains information parsed from a csv file. The csv file contains 7 fields that I'm inserting into the formdata.

for(var i=1; i < data.length; i++){
        var formData = new FormData()
        formData.append('image', data[i]['data'][0] == "" ? null : data[i]['data'][0])
        formData.append('audio', data[i]['data'][1] == "" ? null : data[i]['data'][1])
        debugger
        formData.append('phrase', data[i]['data'][2] == "" ? null : data[i]['data'][2])
        formData.append('translation', data[i]['data'][3] == "" ? null : data[i]['data'][3])
        formData.append('format', data[i]['data'][4] == "" ? null : data[i]['data'][4])
        formData.append('gender', data[i]['data'][5] == "" ? null : data[i]['data'][5])
        formData.append('language', data[i]['data'][6] == "" ? null : data[i]['data'][6])
        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: formData,
            redirect: 'follow'
          };
        fetch("url", requestOptions)
        .then(res => {
            console.log(res);
        }).catch(function (error) {
            console.log(error);
                        });
    }

There, data[i]['data'][0] contains an absolute path to an image in user's computer. I'm trying to retrieve that file and load into into a 'File' object in JS so I can append it to the formdata as a file as opposed to a string as it is right now.

arthrax
  • 161
  • 2
  • 4
  • 12
  • I recommend using the File API, see https://stackoverflow.com/a/754398/1117119 . – yeerk Jun 21 '20 at 06:20
  • 3
    Does this answer your question? [Reading file contents on the client-side in javascript in various browsers](https://stackoverflow.com/questions/750032/reading-file-contents-on-the-client-side-in-javascript-in-various-browsers) – yeerk Jun 21 '20 at 07:21
  • @yeerk sorry about the delay; and unfortunately I'm trying to load a file where only the path to the file is given by the user. Let's say I parse a CSV file and store the image's local path to variable "img" (img = "/usr/var/Images/test.png"). When I append this to my form data, it's being appended as a string and not as a file. So I'm trying to convert the path into a file object (that is not chosen by the user through an input form) so when I append it to FormData it acts like a file. – arthrax Jun 21 '20 at 17:48
  • Ah, could you post an example of your code so far? – yeerk Jun 21 '20 at 17:54
  • @yeerk I have edited the question with what I have so far :) – arthrax Jun 21 '20 at 19:38
  • Oh I see, it looks like you will need to use the File API. The duplicate question may help, and you might also find MDN's tutorial on it useful: https://developer.cdn.mozilla.net/en-US/docs/Web/API/File/Using_files_from_web_applications . – yeerk Jun 21 '20 at 19:50
  • Ohh gotcha, I think I have an idea on how to approach it now. Thank you! – arthrax Jun 21 '20 at 20:53

0 Answers0