expo / image-upload-example

Demonstration of how to upload images from the ImagePicker, using a node backend to upload to S3
234 stars 88 forks source link

Why files witch are picked by imagePicker don't go to server? #13

Closed ApayRus closed 1 month ago

ApayRus commented 6 years ago

Hi! I have created endpoint "uploads' and tested it with Postman. It works, files appears on the server, and postman shows relevant response with status 200 and body with uploaded files info. screenshot from 2018-06-19 08-04-40

But when I try to post data from my client app (react-native), server sends and error

Unhandled error for request POST /api/uploads/zayavka1/upload?access_token=GAxRixBW5oT3ayErF3IaWqd7zpSpBSsKED3IylR43La7jpbn4uRgKEDK90u7H3P7: Error: No file content uploaded
    at /home/rus/dobrofon-backend/node_modules/loopback-component-storage/lib/storage-handler.js:204:13
    at IncomingForm.<anonymous> (/home/rus/dobrofon-backend/node_modules/formidable/lib/incoming_form.js:107:9)
    at emitNone (events.js:105:13)
    at IncomingForm.emit (events.js:207:7)
    at IncomingForm._maybeEnd (/home/rus/dobrofon-backend/node_modules/formidable/lib/incoming_form.js:557:8)
    at MultipartParser.parser.onEnd (/home/rus/dobrofon-backend/node_modules/formidable/lib/incoming_form.js:426:10)
    at callback (/home/rus/dobrofon-backend/node_modules/formidable/lib/multipart_parser.js:102:31)
    at MultipartParser.write (/home/rus/dobrofon-backend/node_modules/formidable/lib/multipart_parser.js:268:15)
    at IncomingForm.write (/home/rus/dobrofon-backend/node_modules/formidable/lib/incoming_form.js:159:34)
    at IncomingMessage.<anonymous> (/home/rus/dobrofon-backend/node_modules/formidable/lib/incoming_form.js:125:12)
    at emitOne (events.js:115:13)
    at IncomingMessage.emit (events.js:210:7)
    at IncomingMessage.Readable.read (_stream_readable.js:478:10)
    at flow (_stream_readable.js:849:34)
    at resume_ (_stream_readable.js:831:3)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)

And this is my request from client:

  fetch(path, {
    method: 'POST',
    headers: {
      Accept: '*/*',
      'Content-Type': 'multipart/form-data'
    },
    body: formData
  })

And formData looks like:

{
"_parts": Array [
     Array [
       "file[]",
       "file:///data/data/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Freact-native-nav-tutorial-7bcb8d09-73d3-4f7f-87a6-a75e9d9ad295/ImagePicker/09648b04-d674-444c-82d7-c5c50e57726c.jpg",
     ],
   ],
 }

My env info:

{
    "expo": "^27.0.1",
    "native-base": "^2.4.4",
    "react": "16.3.1",
    "react-native": "~0.55.2",
    "react-navigation": "^2.0.1"
  }
$ node -e 'console.log(process.platform, process.arch, process.versions.node)'
linux x64 8.5.0
$ npm ls --prod --depth 0 | grep loopback
├── loopback@3.19.1
├── loopback-boot@2.27.1
├── loopback-component-explorer@6.0.1
├── loopback-component-storage@3.3.1
├── loopback-connector-mongodb@3.4.3
rus@ubuntu16:~/dobrofon-backend$

I tried many things, but I can't figure out what I do wrong. I didn't find any examples with using fetch and loopback-storage (only xhr and angular). Please, share some ideas about it.

devpascoe commented 5 years ago

@Aparus how did you go? I'm facing a similar issue.

ZeeshanZafar557 commented 5 years ago

the same issue I also facing for the last two days.

kopax commented 4 years ago

Hello, I am trying to upload photo in expo and was looking for an example and ended up here,

unfortunately:

This project needs an update
This project uses Expo SDK v20.0.0. If you want to open this project, the author will need to update the project's SDK version.
tesshsu commented 4 years ago

Hi I do have the same issue, we had change another AWS server, then there's no working to upload either which was working great before

EvanBacon commented 1 month ago

rewrote the demo and can confirm everything works now