Image Upload

Image Upload

An awesome, simple library for quickly uploading images in your Ionic App!

Free!

Not yet rated
Sinan Bolel

Sinan Bolel

Member since 2014

Details

Version:
1.2.0
Size:
0mb
Ionic:
1.0.0
Platforms:
iOS, Android, Windows Phone
Released:
5 years ago
Updated:
5 years ago
Category:
Plugins
Tags:
image, images, upload, uploads, amazon, aws, s3

Ionic Image Upload

An open source plugin will upload image files to an S3 bucket.

Getting Started

Include image-upload.bundle.min.js in your app:

<script src="lib/image-upload.min.js"></script>

Or, to use this with the Amazon SDK included:

<script src="lib/image-upload.bundle.min.js"></script>

Upload an image from a controller

.controller('UploadController', function ($scope){
  var imageUpload = new ImageUpload();
  $scope.file = {};
  $scope.upload = function() {
    imageUpload.push($scope.file, function(data){
      console.log('File uploaded Successfully', $scope.file, data);
      $scope.uploadUri = data.url;
      $scope.$digest();
    });
  };
})

Full Example

File upload form HTML:

<ion-content ng-controller="UploadController">
  <input class="bottom-marg-15" type="file" name="file" file="file">
  <button class="button button-small button-full button-positive" ng-disabled="file.size&amp;&amp;false || uploadProgress&gt;0" ng-click="upload()" ng-cloak="">Upload</button>
  <img class="fit" ng-if="uploadUri" ng-src="{{uploadUri}}">
  <a ng-href="{{uploadUri}}" ng-bind="uploadUri"></a>
</ion-content>

file Directive:

.directive('file', function() {
  return {
    restrict: 'AE',
    scope: {
      file: '@'
    },
    link: function(scope, el, attrs){
      el.bind('change', function(event){
        var files = event.target.files;
        var file = files[0];
        if(file.size>0){
          scope.file = file;
          scope.$parent.file = file;
        } else {
          scope.file = {};
          scope.$parent.file = {}; 
        }
        scope.$apply();
      });
    }
  };
})

Configuring AWS S3

You are welcome to use the public S3 bucket that is preconfigured in src/image-upload.js. This public bucket will only accept files with JPG and PNG extensions up to 10MB in size. The files are automatically deleted after 24 hours.

To use your own Amazon S3 bucket, change the information in src/image-upload.js and uglify by running grunt in Terminal from the project directory.

Setting up an AWS S3 Bucket for use with Ionic Image Upload

Below is a summary of Uploading To S3 With AngularJS by Cheyne Wallace

To setup an S3 bucket for use with the Ionic Image Upload plugin, we need to:

  • Configure an AWS S3 bucket by creating a "public" IAM account:
    • The IAM user will only have permission to PUT files into a particular AWS Bucket and nothing else.
    • This users API key will be public -- anyone will be able to upload to your bucket if they use this key.
  • Configure the bucket to expire all objects within 24 hours.
    • Even if someone uploads a 10 Gigabyte file, it will eventually be deleted.
  • Configure CORS to prevent uploading of content from anywhere other than your own domain.
  • Create a server to transfer uploaded files from the temporary bucket to a permanent bucket:
    • When a new file is uploaded to this temporary bucket from the app;
    • App will send the details of the file to the server;
    • Server will perform any necessary transformations, encryption, resizing, or processing, and,
    • Server will move the file into a permanent bucket.

1. Create the IAM User

  1. Open AWS console to the "Security Credentials" section.
  2. Create a new user and call it something like "app_public".
  3. Make sure you download the key information when it is presented, this is what we’ll be feeding into our app later to upload with.
  4. Under the permissions section, click "attach a new policy", then select the policy generator.
  5. Select Amazon S3 as the service and only select the PutObject action from the drop down list.
  6. The ARN is an Amazon Resource Name. This will look like arn:aws:s3:::your_bucket_name
  7. Click "add statement", then save and apply policy.

Now your user has write-only access to the bucket.

Your policy is going to look something like this;

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt126637111000",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject"
      ],
      "Resource": [
        "arn:aws:s3:::your_bucket_name"
      ]
    }
  ]
}

2. Configure CORS And Expiry On The Bucket

Go to the AWS S3 console, click your bucket, then click the Properties button. You'll use the "Add CORS Configuration" button to configure your bucket to only allow PUT requests from particular origins.

You can use the following sample config -- edit to reflect your development, production and staging environments.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://localhost:3000</AllowedOrigin>
        <AllowedOrigin>https://www.yourdomain.com</AllowedOrigin>
        <AllowedOrigin>http://staging.yourdomain.com</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>x-amz-server-side-encryption</ExposeHeader>
        <ExposeHeader>x-amz-request-id</ExposeHeader>
        <ExposeHeader>x-amz-id-2</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Expire the objects in this bucket after some short period to prevent malicious use. Your server side code should handle moving and deleting valid files so you can assume those that are left after 24 hours are not meant to be there.

  1. From your S3 console, view a bucket, and then click Properties.
  2. Expand the "Lifecycle Rules" section and follow the prompts.
  3. Set the action to "Permanently Delete Only" and set it for 1 day -- this will delete any objects in the bucket that are older than 1 day permanently.

Now, you're ready to use this bucket in your Ionic Image Upload app!

Hey there! You'll need to log in before you can leave a comment here.

Sinan Bolel

Sinan Bolel   ·   5 years ago

The demo link was broken and is now fixed. Sorry!

Abid

Abid   ·   5 years ago

hi. thanks for this! how to use it with ionic without html form? 1/ i try to post recorded video : var video = file:///private/var/mobile/Containers/Data/Application/51EE533D-4253-42CB-8203-C62AF49B410C/tmp/output.mov 2/ via: imageUpload.push(video... Thanks!

Sinan Bolel

Sinan Bolel   ·   5 years ago

Hi Abid, the plugin only works for image files (.png, .jpg, .jpeg, .gif). We can put together a version that works for video files, thanks for your feedback!

Jodie

Jodie   ·   5 years ago

Bookmarked!

Mike

Mike   ·   5 years ago

Hi great plugin! Can you make more clearly on document so we can know better how to use this plugin?

Sinan Bolel

Sinan Bolel   ·   5 years ago

Hi Mike! Thank you, I'm happy to hear you enjoy it! I'll open source it tonight, and I'd love to go over any questions you may have. For anyone who has bought this so far, please email me and I'll refund you. Let's build amazing things, together!

Dulce Gonzalez Barradas

Dulce Gonzalez Barradas   ·   5 years ago

hello, I can change the upload function of image-upload.js config to point to my personal server?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Sinan Bolel

Sinan Bolel   ·   5 years ago

THIS PLUGIN IS NOW FREE AND OPEN SOURCE! <3

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Dulce Gonzalez Barradas

Dulce Gonzalez Barradas   ·   5 years ago

hkjhjkcs

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Dulce Gonzalez Barradas

Dulce Gonzalez Barradas   ·   5 years ago

hello, I can change the upload function of image-upload.js config to point to my personal server?

Sinan Bolel

Sinan Bolel   ·   5 years ago

Hi Dulce, yes you can. See the instructions at https://github.com/sbolel/image-uploader

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Razman

Razman   ·   5 years ago

Can you post the policy setting for the bucket on the S3 side. I tried with your bucket and it works. Trying with my own bucket and it does not work. I suspect the policy setting. Any other ideas why?

Sinan Bolel

Sinan Bolel   ·   5 years ago

Hi Razman, I've updated the repository with bucket config tutorial. Plugin: https://github.com/sbolel/image-uploader Demo App: https://github.com/sbolel/ionic-image-upload

Razman

Razman   ·   5 years ago

Hello, one more question. How do i select the file from cordova camera? My app will take a picture with cordova.camera. I tried to pass to your function the whole file path but could not send over.

Sinan Bolel

Sinan Bolel   ·   5 years ago

Razman, here is a full demo app: https://github.com/sbolel/ionic-image-upload

Sinan Bolel

Sinan Bolel   ·   5 years ago

You need to pass a file, not the path of a file. See the `file` directive at https://github.com/sbolel/ionic-image-upload/blob/master/www/js/app.js

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Zain Umerani

Zain Umerani   ·   4 years ago

Hi! This is an awesome plugin. I'm getting an error and can't seem to figure it out: Error: Expected params.Body to be a string, Buffer, Stream, Blob, or typed array object Also, when I run 'ionic run ios', the content won't load but on Chrome it loads (Safari it doesn't). I was wondering why that was happening?

Yann Benichou

Yann Benichou   ·   4 years ago

I am getting the same error : Uncaught (in promise) Expected params.Body to be a string, Buffer, Stream, Blob, or typed array object . did you find any solution for this issue ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Breanna Jackson

Breanna Jackson   ·   4 years ago

Thanks for the plugin! I did notice in GitHub you say include: "<script src="lib/image-upload.min.js"></script>" but the file name is: lib/image-uploader.min.js" small typo but hopefully it'll save someone some time.

Zain Umerani

Zain Umerani   ·   4 years ago

Did you get it to work? After I add the bower components, it doesn't work for me.

Breanna Jackson

Breanna Jackson   ·   4 years ago

Ya it doesn't work for me yet :( Getting the error "ReferenceError: ImageUpload is not defined". I'm thinking it's because the function name needs to be "ImageUploader" but when I do that I get another error. Still playing around with it to see if I can get it to work

Zain Umerani

Zain Umerani   ·   4 years ago

ah I see, I'll post back here if I get it working

Sinan Bolel

Sinan Bolel   ·   4 years ago

Hi! I apologize for being out of touch. I'll get back into this towards the end of this week. Thank you for trying it out! Please dont hesitate to submit PRs :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Breanna Jackson

Breanna Jackson   ·   4 years ago

Is it possible for me to see the full demo files including the html files so I can see where my error could be? I'm getting the error "ImageUpload is not defined"

Sinan Bolel

Sinan Bolel   ·   4 years ago

Here it is Breanna: https://github.com/sbolel/ionic-image-upload

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Breanna Jackson

Breanna Jackson   ·   4 years ago

Is it possible for me to see the full demo files including the html files so I can see where my error could be? I'm getting the error "ImageUpload is not defined"

Sinan Bolel

Sinan Bolel   ·   4 years ago

Here it is Breanna: https://github.com/sbolel/ionic-image-upload

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Breanna Jackson

Breanna Jackson   ·   4 years ago

Thanks for the plugin! I did notice in GitHub you say include: "<script src="lib/image-upload.min.js"></script>" but the file name is: lib/image-uploader.min.js" small typo but hopefully it'll save someone some time.

Zain Umerani

Zain Umerani   ·   4 years ago

Did you get it to work? After I add the bower components, it doesn't work for me.

Breanna Jackson

Breanna Jackson   ·   4 years ago

Ya it doesn't work for me yet :( Getting the error "ReferenceError: ImageUpload is not defined". I'm thinking it's because the function name needs to be "ImageUploader" but when I do that I get another error. Still playing around with it to see if I can get it to work

Zain Umerani

Zain Umerani   ·   4 years ago

ah I see, I'll post back here if I get it working

Sinan Bolel

Sinan Bolel   ·   4 years ago

Hi! I apologize for being out of touch. I'll get back into this towards the end of this week. Thank you for trying it out! Please dont hesitate to submit PRs :)

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Zain Umerani

Zain Umerani   ·   4 years ago

Hi! This is an awesome plugin. I'm getting an error and can't seem to figure it out: Error: Expected params.Body to be a string, Buffer, Stream, Blob, or typed array object Also, when I run 'ionic run ios', the content won't load but on Chrome it loads (Safari it doesn't). I was wondering why that was happening?

Yann Benichou

Yann Benichou   ·   4 years ago

I am getting the same error : Uncaught (in promise) Expected params.Body to be a string, Buffer, Stream, Blob, or typed array object . did you find any solution for this issue ?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Razman

Razman   ·   5 years ago

Can you post the policy setting for the bucket on the S3 side. I tried with your bucket and it works. Trying with my own bucket and it does not work. I suspect the policy setting. Any other ideas why?

Sinan Bolel

Sinan Bolel   ·   5 years ago

Hi Razman, I've updated the repository with bucket config tutorial. Plugin: https://github.com/sbolel/image-uploader Demo App: https://github.com/sbolel/ionic-image-upload

Razman

Razman   ·   5 years ago

Hello, one more question. How do i select the file from cordova camera? My app will take a picture with cordova.camera. I tried to pass to your function the whole file path but could not send over.

Sinan Bolel

Sinan Bolel   ·   5 years ago

Razman, here is a full demo app: https://github.com/sbolel/ionic-image-upload

Sinan Bolel

Sinan Bolel   ·   5 years ago

You need to pass a file, not the path of a file. See the `file` directive at https://github.com/sbolel/ionic-image-upload/blob/master/www/js/app.js

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Dulce Gonzalez Barradas

Dulce Gonzalez Barradas   ·   5 years ago

hello, I can change the upload function of image-upload.js config to point to my personal server?

Sinan Bolel

Sinan Bolel   ·   5 years ago

Hi Dulce, yes you can. See the instructions at https://github.com/sbolel/image-uploader

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Dulce Gonzalez Barradas

Dulce Gonzalez Barradas   ·   5 years ago

hkjhjkcs

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Abid

Abid   ·   5 years ago

hi. thanks for this! how to use it with ionic without html form? 1/ i try to post recorded video : var video = file:///private/var/mobile/Containers/Data/Application/51EE533D-4253-42CB-8203-C62AF49B410C/tmp/output.mov 2/ via: imageUpload.push(video... Thanks!

Dulce Gonzalez Barradas

Dulce Gonzalez Barradas   ·   5 years ago

hello, I can change the upload function of image-upload.js config to point to my personal server?

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Sinan Bolel

Sinan Bolel   ·   5 years ago

Hi Mike! Thank you, I'm happy to hear you enjoy it! I'll open source it tonight, and I'd love to go over any questions you may have. For anyone who has bought this so far, please email me and I'll refund you. Let's build amazing things, together!

Mike

Mike   ·   5 years ago

Hi great plugin! Can you make more clearly on document so we can know better how to use this plugin?

Jodie

Jodie   ·   5 years ago

Bookmarked!

Sinan Bolel

Sinan Bolel   ·   5 years ago

Hi Abid, the plugin only works for image files (.png, .jpg, .jpeg, .gif). We can put together a version that works for video files, thanks for your feedback!

Sinan Bolel

Sinan Bolel   ·   5 years ago

The demo link was broken and is now fixed. Sorry!

Sinan Bolel

Sinan Bolel   ·   5 years ago

THIS PLUGIN IS NOW FREE AND OPEN SOURCE! <3

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Hey there! You'll need to log in before you can leave a rating here.

There are no ratings for this plugin yet

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}