User generated image hosting for angularJS App

Question

I'm building a web app with AngularJS that will allow users to upload their own images. Right now all of my data is text based, so I am storing the text based data in Firebase. As far as I know, Firebase can't store images. What I want to do is store the user generated images somewhere simple (I'm thinking Amazon S3 or even Dropbox) and then reference the images via unique URLs, which I would store as text in Firebase.

My questions:

Does this seem like a valid approach?
Any recommended services for hosting the images?
How to upload an image to the hosting service and get the image's unique URL?

Right now I am allowing users to upload images on the front end with the following code, just not sure what to do with the images once I have them. Would appreciate any help, I'm very new to this!

HTML

<output id="list"></output>
<input type="file" id="files" name="files[]" class="button" multiple />
<a href="#" id="camera" class="button" ng-click="getImages()" prevent><i class="icon-camera"> Upload Pictures</i></a>

Angular Controller

$scope.getImages = function(){
    $("input[type='file']").trigger('click');
}

function handleFileSelect(evt) {
var files = evt.target.files; // FileList object



// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

    console.log(f);

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      span.innerHTML = ['<img class="thumb" src="', e.target.result,
                        '" title="', escape(theFile.name), '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);
    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);
}

}

document.getElementById('files').addEventListener('change', handleFileSelect, false);

I guess you can store images in Firebase, check out this answer here: http://stackoverflow.com/a/13957446/1358670 — Abu Romaïssae, Oct 26 '13 at 18:56
`Any recommended services for hosting the images?` is not an appropriate question for this site — charlietfl, Oct 26 '13 at 20:55

score 0 · Answer 1 · answered Jan 16 '14 at 16:30

0

You could use a service like Cloudinary to host images uploaded by your users. There are Angular directives that making using the service pretty easy. You will need a small server-side component to encrypt the upload parameters.

answered Jan 16 '14 at 16:30

JBCP

13,109
9
73
111

score 0 · Answer 2 · answered Sep 23 '14 at 22:36

Look into Zapier integration with S3. The idea is that you setup a queue collection in firebase where you would create a new instance with the binary of the file data. Then zapier listens to for child_added on this queue collection and does it's magic (that you don't have to worry about) to upload your file to S3 bucket. After everything is finished, the instance in the queue is deleted... No server side needed with that, except there might be some fees...

Here is the link https://zapier.com/zapbook/amazon-s3/

User generated image hosting for angularJS App

2 Answers2