I've done some looking at the Cloudinary API and upload examples for NodeJS, and it looks like the server-side uploads use a file path. Meanwhile, the client-side uploads require a frontend input tag. I already have a frontend for users to select and crop a picture to their liking, and this gives me a data URI. I'd like to save this file to Cloudinary without having to use their built in frontend option. Is this possible? This would basically mean that I would be able to call some kind of upload function that can take a URI or file blob.
Cloudinary supports uploading files using a data-URI encoded string too.
Please make sure that you send your content as a Data-URI as explained here: http://en.wikipedia.org/wiki/Data_URI_scheme.
For example, in Node.js:
cloudinary.uploader.upload("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
function(result) {console.log(result)});
Related
I use sails.js for creating a backend, and it supports posting text and uploading file/image same time in one of my controller methods. Because of the business logics, I need to tell if a POST request to this controller method contains file for uploading or not.
To upload files, I use the build-in Skipper module in sails.js and use the file field in the req parameters. For example, if I need to upload images, I put images field in the request going to the backend/sails.js:
req.file('images').Upload({...});
I tried to use req.file('images') to examine if the incoming request contains files to upload by following, but it does not work - request without uploading files still gives req.file('images') = true:
if (!!req.file('images')) { // this turns out to be true regardless of uploading file or not
return uploadToS3(req, 'images');
}
sails.log.info('creating entity without uploading file');
return createEntityWithoutImage(req.params.all());
Any idea how to tell if a POST request contains file to upload?
You can check number of files that the user uploaded by using:
req.file('images')._files.length
This is undocumented feature of skipper:
https://github.com/balderdashy/skipper/blob/master/standalone/Upstream/Upstream.js#L51
So it can be decpreate in future versioln. So be sure, that you not upgrade the module without testing it first.
I want to download file from external server but after renaming it. Let's say http://playtictactoe.atwebpages.com/logo.png is an image file I want to download. I have used the following HTML:
<a href="http://playtictactoe.atwebpages.com/logo.png" download="myName.png">
Download File
</a>
But this doesn't rename the file. I've read somewhere that this is because of Response Header on server. Is there any way to ignore Response Header on client side? Else guide me any other solution.
You can download the file as a buffer and resave with the file api like descriped here:
HTML5 File API downloading file from server and saving it in sandbox
Or lookup FileAPI and XMLRequest to Buffer. You download the file as binaryBuffer save it with fileAPI and rename it. This should also work in Firefox. But this is not the simple solution you are searching for. Even though it works ;-)
You can then rename the file like you want.
Cheers
I have an AngularJS front-end which sends small and big images to an API. It encodes the image in base64 and then send it into a JSON document.
Is there a best/faster way to do this ? Maybe not encoding the image but send a JavaScript File object ? Or something else ? (The images can be up to 5Mb).
There is a concept known as multipart-form data, that can be used for file upload. Java provides libraries to handle the uploaded file and save it in a location of our choice. Please tell me if you want me to share the exact implementation. I can do it for you. You just need a do post request to API.
I am using redactor plugin with meteorjs, to format the texts and add images, videos and links.Redactor supports uploading images as a web link, but here I wanted to add a button to upload images from local machine. For this I have added the button to the redactor. It is showing the browse image selection and is working.
$('.editor').redactor({
imageUpload:"/upload",
imageUploadCallback: function(image, json)
{
console.log(image);
console.log(json);
},
imageUploadErrorCallback: function(json)
{
console.log(json.error);
}
});
When I print console.log("#redactor_file").val()); it gives the name of the file. But, when I do console.log(console.log(html);) its gives <p><img src="undefined"></p>. Can I get the link or the url of the image here. If yes then how?
HTTP.methods({
'upload': function(data) {
console.log(data)
return JSON.stringify( {'data':"data"})
}
});
When I do console.log(data) using the above code it shows me Image in String format. Now I want to store the Image using GridFS. Or is there any better way to store Image in MongoDB. If yes then tell me or guide me to store image using GridFS ?
While Redactor provides a client-side method for uploading files, it does not provide a server-side method for receipt of uploaded files. Also, stock Meteor doesn't provide such a method either.
So you have a few choices. First is through using a router such as Iron Router, which you could create a server-side /uploads route, and Iron Router gives you access to the request, response objects. Which might work, but because this is no longer over DDP, you don't have access to Meteor.userId, etc. See How to respond server-side to routes using Meteor and Iron-Router?
A more Meteor-like way of doing the file upload is Meteor File or CollectionFS though I'm not sure how simply these would integrate with Redactor. You could definitely get them to work together, just off the top of my head I don't know how easy it would be.
I'm using FileReader.readAsBinaryString to upload a file using a multipart/form-data POST request to a server.
The file gets sent and the server receives and saves the file.
When I try to open the file on the server I get messages saying that it is corrupted (png images) or I see a blank document (in the case of a pdf). Obviously something is going wrong.
Is there some other encoding that needs to be applied to the data returned in event.target.result in the FileReader.onload handler? Am I missing something else?
Thanks
Try using FormData instead of reading the file as a binary string and constructing the multipart/form-data request manually. See my response here:
HTML5 File API readAsBinaryString reads files as much larger, different than files on disk