expo / image-upload-example

Demonstration of how to upload images from the ImagePicker, using a node backend to upload to S3

image-upload-example

Snap a photo or grab it from your camera roll, and upload it. See /backend for an example node service to handle the upload to S3 (Amazon AWS), and /frontend for the Expo app.

Frontend

cd image-upload-example
yarn install

OR

npm install

Then open the image-upload-example folder in XDE.

Backend

cd image-upload-example
npm install
npm start

Try it: https://expo.io/@community/image-upload-example

image-upload-example's Issues

work this when i do eject ?

if i eject project ( or detach )

this working?

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

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.

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
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
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.

Error on frontend code

in the file frontend/main.js on line 168, you try to get the MIME type from the URI. However, by doing let fileType = uri[uri.length - 1]; you are only getting the uri's last character. To correctly get the MIME type you shoukd use uriParts instead of uri.

The line should be written as let fileType = uriParts[uriParts.length - 1];

npm ERR! missing script: start

:~/React Native/image-upload-example$ npm start
npm ERR! missing script: start

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '~/.nvm/versions/node/v12.18.3/bin/node',
1 verbose cli   '~/.nvm/versions/node/v12.18.3/bin/npm',
1 verbose cli   'start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose stack Error: missing script: start
4 verbose stack     at run (~/.nvm/versions/node/v12.18.3/lib/node_modules/npm/lib/run-script.js:155:19)
4 verbose stack     at ~/.nvm/versions/node/v12.18.3/lib/node_modules/npm/lib/run-script.js:63:5
4 verbose stack     at ~/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/read-package-json/read-json.js:116:5
4 verbose stack     at ~/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/read-package-json/read-json.js:436:5
4 verbose stack     at checkBinReferences_ (~/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/read-package-json/read-json.js:391:45)
4 verbose stack     at final (~/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/read-package-json/read-json.js:434:3)
4 verbose stack     at then (~/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/read-package-json/read-json.js:161:5)
4 verbose stack     at ReadFileContext.<anonymous> (~/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/read-package-json/read-json.js:350:20)
4 verbose stack     at ReadFileContext.callback (~/.nvm/versions/node/v12.18.3/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:123:16)
4 verbose stack     at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:261:13)
5 verbose cwd ~/React Native/image-upload-example
6 verbose Linux 5.11.0-27-generic
7 verbose argv "~/.nvm/versions/node/v12.18.3/bin/node" "~/.nvm/versions/node/v12.18.3/bin/npm" "start"
8 verbose node v12.18.3
9 verbose npm  v6.14.6
10 error missing script: start
11 verbose exit [ 1, true ]

Is it possible to use this example with firebase storage?

I'm stuck into uploading the chosen picture with expo into firebase storage, I been trying for 16 hours but nothing. I used your example and it works as magic, but I need it for firebase storage.

Application Crash

The application is crashing on android when using camera capture. I've tried with sdk26 also. Image from gallery works fine. Any idea what can be wrong with camera?

Add to zeit/awesome-zeit

Looks like a great addition! https://github.com/zeit/awesome-zeit

Is that possible to add an example of direct upload to S3

error in code?

let uriParts = uri.split('.');
let fileType = uri[uri.length - 1];

should be

let uriParts = uri.split('.');
let fileType = uriParts[uriParts.length - 1];