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 />
Upload Pictures</i>
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);
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.
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/
Related
$("#downloadPdf").click(function () {
$(".img-indicator").hide();
html2canvas($("#frame"), {
onrendered: function (canvas) {
var image = canvas.toDataURL(
'image/png');
image = image.replace('data:image/png;base64,', '');
$("#generatedImg").val(image);
window.open(image);
}
});
});
I want to save this image to folder that is located on a server,
and I want to save that image with specific file name too.
JavaScript/jQuery run on the client side and cannot access the server folders. You need to create a web page on your server that will receive the file from your JavaScript/jQuery and saves it in the folder. Then you can call this page from your JavaScript/jQuery using $.ajax.
I have a Grails web app. Currently I'm serving static image files to my users. I saw this post on StackOverflow that discussed a solution about serving images as stream to hide the source of it. My question is, doesn't that have some trades-off such as putting load on the server since it needs to open a socket in order to stream it to the user v.s just serving it as a static file ?
// controller action
def displayGraph = {
def img // byte array
//...
response.setHeader('Content-length', img.length)
response.contentType = 'image/png' // or the appropriate image content type
response.outputStream << img
response.outputStream.flush()
}
You could then access your image in the src of an tag like this:
<img src="${createLink(controller: 'myController', action: 'displayGraph')}"/>
response.outputStream << img
response.outputStream.flush()
This is not streaming if you mean this: http://en.wikipedia.org/wiki/Streaming_media
It's just using Java OutputStream to provide response content - which is done on the server and response is returned to the client. No socket is kept open.
Currently I am creating an application where I display an uploaded file from CollectionFS and display it using the CollectionFS url return. Locally the image loads and is displayed. However once I deploy the application to meteor.com the image url does not work. With the console indicating that the image path cannot be found.
CollectionFS returns this url for my image:
/cfs/contacts/75erhMtuwjn66fQH3_default1.png
Locally when I deploy the app I can see the image using in my .html:
img src="/cfs/contacts/75erhMtuwjn66fQH3_default1.png"
The specific code returned by CollectionFS is in the .html file and is being called client side:
{{cfsFileUrl "defaultHandler" fileId=fileId collection="Collection"}}
Locally I use this address as the source for the uploaded image in my html:
localhost:port/cfs/contacts/75erhMtuwjn66fQH3_default1.png
But when I attempt to view the image of the deployed app using the same procedure, it returns with an error of url not found:
http://host.meteor/cfs/contacts/75erhMtuwjn66fQH3_default1.png.com
A file is added on a click event client side .js:
'change .fileUploader': function (e) {
var files = e.target.files;
var fileName = files[0].name;
for (var i = 0, f; f = files[i]; i++) {
var k = ContactsFS.storeFile(f);
Session.set('fileID', k);
}}
Server side:
ContactsFS.fileHandlers({
default1: function(options) {
return {
blob: options.blob,
fileRecord: options.fileRecord // if no blob then save result in fileHandle (added createdAt)
};
}});
Then I can call the url in html with the given function from collectionFS documentation:
{{cfsFileUrl "default1" fileId=fileId collection="ContactsFS"}}
Once again the problem isn't generating the url. Both locally and once deployed the app displays a url. It is using the image url as the source for the image tag that is giving me the problem.
CollectionFS had a bug. I contacted the creator with the issue and it is now resolved in the collectionFS package. The report and closed issue can be found at:
https://github.com/raix/Meteor-CollectionFS/issues/85
I am saving images of my aplication into gridfs. The problem becomes when I need to show the image. I don't know how can i do it. I'm using node.js, geddy framework and mongodb.
this.show = function (req, resp, params) {
var self = this;
var GridFS = require('GridFS').GridFS;
var myFS = new GridFS('resources');
//recupero la imagen
myFS.get(params.id,function(err,data){
});
myFS.close();
params.id is the image id. When i do console.log(data) I recive:
Buffer <90 f8 w8 dj 4f....>
How can I do to respond the image in png format to the view?
thanks...a lot!
I've never used geddy at all, but you might want to look at this:
Render Image Stored in Mongo (GridFS) with Node + Jade + Express
The basic idea is to set the right "Content-Type" header ("image/png" should work) and simply reply to the request with the image data.
Your browser can render the image if you're using an <img src="/url/to/your/image/request/handler">... tag in the html.
You can't console.log image data with most shells / command lines, sorry. ;)
With firebugs net tab open i stated zooming in and out of google map and i found its making requests for the png images.
Ok with this i understood that we can request the images using the Ajax. but wait ? i always used to request html, jsox, txt and xml. Image ........ its strange for me ? Can some one please elaborate on this ?
Also i would like to know if text is downloaded we add it to some DOM element and it show up. How images retried from the ajax can be accessed ?
Any help or pointer will be great help :)
GMaps doesn't make XMLHttpRequests to get the images. They instead use a normal <img /> element that is injected via javascript.
They then use the "onload" and "onerror" events to detect if the image was loaded correctly.
They retry a download of the image if it times out. This is achieved by setting a timer and once it expires re-setting the src property of the image.
var tile = document.createElement('img');
var url = 'http://sometilehost/X.Y.Z.png';
var downloadTimeout = 10000; // Retry in 10 seconds
// Tile downloaded successfully
tile.onload = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile downloaded');
};
// The tile couldn't be downloaded. 404, 503 ...
tile.onerror = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile not downloaded');
};
// This will fire if the tile doesn't download in time
tile.downloadTimer = window.setTimeout(function () {
tile.src = url; // Start the download again
}, downloadTimeout);
tile.src = url;