How to upload a file(image or video) to server in ionic

Ionic Framework ionic-v3
1

I got a plugin called ‘transfer’ in ionic2 docs.

Problem is using this we can only upload a file if we know its path. is there any plugin or way to choose and upload files to server in ionic2.

2

If you know that the file is inside your apps directory (e.g. because you copied it there) you can resolve the path by calling:

var foo = cordova.file.dataDirectory + fileName;

Also make sure to install the needed File plugin:

ionic plugin add cordova-plugin-file

And also add a global var above your class so you don’t get any errors:

import { File } from 'ionic-native';
declare var cordova: any;

I will soon release a detailed blogpost on taking, storing and uploading images with Ionic 2, will let you know here once it’s live.

3

Genereally we do have files inside file manager. what do you mean by ‘apps directory’?

4

Check this link to learn more www.developerslearnit.com/2016/11/build-photo-gallery-app-with-ionic2.html

1 Like
5

When i am using multiple images uploading a same page it’s showing a same to other uploading areas. How can i upload a same page with multiple images ?

6

I using your www.developerslearnit.com/2016/11/build-photo-gallery-app-with-ionic2.html link and working fine. When i click chooseImage() it’s ope a camera and gallery only. i want to upload a files (PDF, DOC) . How can i add this in uploading ? If any example code?

1 Like
7

Hi, I am new and I am not getting how to upload a jpg image on the server.
I used ionic native file transfer.
its give:
error code = null
error source = null
error terget = null

I dont know if the code in ionic is wrong or in php.

can someone give a reference for complete tutorial on how to upload images on server using https://ionicframework.com/docs/native/file-transfer/

8

Hello Simon,
I’ve checked your tutorial https://devdactic.com/ionic-2-images/

please let me know if this gonna work for iOS too?
As you know FilePath is supported only for Android.

What to do for iOS ?

Please help!

9

‘AppsDirectory’ means
phoneStorage> Android > data> your project folder (e.g com.facebook.katana)

10

The tutorial works for iOS, the FilePath is only used inside the if for the Android Platform!

11

Hi Simon, I have followed your tutorial, but I am getting the FilePath error - Error while storing file. I have tried the solution of the other guy in your comment section but still not able to resolve the issue. Can you please help me out. Thanks.

12

i’m encounter some problem when following your tutorials. it seems my picture didnt upload to server. Is it because the picture in base64?

13

@saimon could you do a video about capturing video and uploading video from gallery!
and how to create thumbnails from video

P.S-picking video from gallery is a nightmare for me

14

I got this working , picking from a gallery and using camera then sending to a laravel backend via api.

Which backend are you using ?

N.B . I am uploading images ONLY not videos

15

i am using angular framework

16

The way mine works is I am sending it as a base64 string from my Ionic app then convert it on the backend to a file before saving it as a file.

17

can you get video in base64!?

18

vannakam da mpla ! Refer this used to post more pic on a single page or try this