Not getting the file object while using custom uploader.

[utkarshrai003]

I am trying to use custom uploader, specifically uploadByFile method. This method takes one argument, which is supposed to be the file that we need to upload on the server. What I am getting isa bunch of file properties, but the actual file is missing.

Here is the reference code.

tools: {
        image: {
          class: ImageTool,
          config: {
            uploader: {
              uploadByFile(file) {
                return fetch('http://localhost:3001/api/v1/file_upload', {
                  method: 'post',
                  body: JSON.stringify{
                    file: file,
                    filename: 'first_img'
                  })
                }).then(function(response) {
                  return {
                    success: 1,
                    file: {
                      url: 'https://my-photo-gallary.s3.ap-south-1.amazonaws.com/go_that_extra_mile.png'
                    }
                  }
                })
              }
            }
          }
        }
      }

Here is what I receive when logging the file argument.

[tnylea]

@utkarshrai003

I used your code as reference in order to pass the file using JSON, and I ran into the problem you had as well and figured out the issue. Take a look at my solution below:

uploadByFile(file) {

    let reader = new FileReader();

    reader.onload = function (e) {

        return fetch('/uploadFile', {
            method: 'post',
            body: JSON.stringify({
                file: e.target.result,
                filename: 'first_img'
            })
        }).then(function(response) {
            return {
                success: 1,
                file: {
                    url: 'https://my-photo-gallary.s3.ap-south-1.amazonaws.com/go_that_extra_mile.png'
                }
            }
        })

    };

    // Read the file
    reader.readAsDataURL(file);
}

You needed to use FileReader(), and then load the image which is sent to the server in your JSON object, passing it as a base64 image.

You can then use fs.writeFile or fs.writeFileSync to save the image where you want.

Hope that helps :)

[Arstman]

I had tried the way @tnylea mentioned, but didn't work due to my server (s3 compliance) response that put file as base64 in json is a "Bad Request", so i use another solution, just use FormData, and should be acceptable by most servers.

...
  uploadByFile(file) {

                   let fd = new FormData();
                   fd.append('file',file);

                   return fetch('/uploadFile', {
                           method:'POST',
                           body:fd
                      }).then(res=>res.json())
                      .then(response => {
                               return {
                                   success: 1,
                                   file: {
                                          url: 'https://your-url/'+response.your_file_uri
                                   }
                         }
                    })
     }

...