I'm trying to implement blueimp jquery uploader. I want it to upload directly to S3 (without PHP script in the middle). I found an example here and followed the steps and it worked (partially). But I could not find anything good for muti-file upload.
What I want to do is to have multiple file uploader with a UI feedback just like in this example.
Does anybody have an example to follow for this scenario?
Thanks for your help.
I couldn't get blueimp to perfectly upload to s3, it would still take advantage of my servers tmp folder.
I ended up switching over to plupload which does upload directly to s3, and has a built in UI ( I just created my own to match the rest of my site).
Uploading Directly to S3
Full Example
I'm not using the multiple file feature but you could do something like
foreach file you are uploading:
var multipart_params = {
'key': config['key'],
'Filename': config['key'],
'acl': 'public-read',
'Content-Type': '',
'AWSAccessKeyId': config['awskey'],
'policy': config['policy'],
'signature': config['signature']
};
up.settings.multipart_params = multipart_params;
up.start();
Hope that helps :)
Related
I was wondering if any one can help with following issue.
I have an Api with node/express for image uploads
server1
var upload = multer({ dest: 'uploads/'})
app.post('/api/upload', upload.single('file'), function(req, res, next) {
if (req.file && req.file.path) {
//used to have imgur upload
//imgur.uploadFile(req.file.path)
// .then(function (json) {
//});
}
});
server2
I have PHP Api for image uploads as well which I have set up for self-hosting using pictshare. I want to redirect file uploads to new API by redirecting uploads to PHP Api server.
Have tried multer, multiparty, needle, request and various other methods... but somehow couldn't figure out.
Is there way to direct multer to new destination?
File is being saved in uploads/ folder, maybe better would be to upload/direct that file to new server and return new url from server2 ?
Looked around for pipelining upload images, with not much luck..
note: server1 api is being used by mobile app so wouldn't want to release app update if it can be handled from server side.
To upload a file (image or whatever) you need to have it in your drive first (or in memory, but I will tackle the drive case first). Then you can read it and send it.
The APIs that receive files use to receive forms. Usually they expect to receive a form where the attachment comes as a file field.
Here you can see a working example uploading an existing file in my drive to an external API by using the 'superagent' library for Node.
const
fs = require('fs'),
agent = require('superagent');
const stream = fs.createReadStream('path/to/downloaded/file');
agent.post(`urlOfApi/uploadFileEndpoint`)
.type('form')
.attach('file', stream.path);
I'm making an app in ionic phonegap where I'd like to offer streaming and downloading the video and audio files for offline use.
In Desktop and Android, this is easy. All I have to do is link directly to the file and modify the header directives in php to force the download.
In iPhone/iOs, clicking the same link tries to open the file in a player immediately and doesn't download the file. Furthermore, it doesn't actually play the file. It just loads an empty video player.
I've tried googling this and looking it up on SO, but I can only find guides for downloading and storing the file within the app.
Such as: iOS - Download Video
But that's not what I need. I don't want to reinvent the wheel and turn my app into a file manager. I need the phone to store it natively in cameraroll or prompt the user to load the file in whatever app they normally use for offline video.
I did find a user-level guide that shows that this is possible, but it doesn't say how we can make this possible as developers:
http://osxdaily.com/2013/05/28/save-videos-from-mail-ios/
How do I mark up a video link so that iOS knows to download it locally?
Please check File Transfer Cordova plugin to see if it works on you.
http://plugins.cordova.io/#/package/org.apache.cordova.file-transfer
And here goes an example code snippet:
var fileTransfer = new FileTransfer();
var uri = encodeURI("http://some.server.com/example_file.mp4");
fileTransfer.download(
uri,
fileURL,
function(entry) {
console.log("download complete: " + entry.toURL());
},
function(error) {
console.log("download error source " + error.source);
console.log("download error target " + error.target);
console.log("upload error code" + error.code);
},
false, null
);
EDIT:
Sorry for missing "cameraroll" in your question. I believe there's no direct way to save images from your url to your Camera Roll. However there's an indirect way for this. You can possibly load your image on the HTML5 canvas in your app. After that, just save its base64 formatted data_url to your camera roll.
Check this answer for more informations: Save to camera roll from path/URL in PhoneGap
I am looking for a ajax php uploader to uploads multiple files , i found some but unfortunately they did not work successfully with IE because IE 7 & 8 did not support
HTML5.
Uploadify & Plupload works fine with flash in IE but they did not return anything after uploading the file.In response i want the modified file name because before uploading a file i will modify the file name.
Any help or suggestion would be highly appriciated.
Thanks
Gaurav
Please refer this link for multiple file uploads using uploadify php - file uploads using uploadify
and in that link(in uploadify.php) replace the line
$fna = $_FILES['Filedata']['name'];
with
$fna = "your modified new filename";
I am using the Amazon SDK for PHP and wideimage. I am resizing an image with wideimage and trying to then upload that resized image to Amazon S3.
$resized = $image->resize($width,$height);
upload
$response = $s3->create_object($myBucket, $newFilename, array(
'fileUpload' => $resized, //this does not work
));
Does anyone know the proper way to do this?
You can use a stream wrapper and use WideImage's saveToFile method. There are many stream wrappers for S3, this is one example: https://github.com/jakajancar/S3StreamWrapper.
You don't need to save an image and then upload from there.
When you resize the image, you have to convert to a string. You can do that with WideImage class.
Example:
$image = WideImage::load($_FILES["file"]['tmp_name']);
$resized = $image->resize(1024);
$data = $resized->asString('jpg');
And then when you're uploading on Amazon, you have to use the param 'body' instead of 'fileUpload'.
Example:
$response = $s3->create_object($myBucket, $newFilename, array(
'body' => $data,
));
I hope that helps.
I would like to point out few things might help someone in making choice.
First of all, I think you better go with what you are trying to do first resize image over your server and then move it to Amazon because suppose if there is some kind of way to resize and upload image at same time on the fly then your script will perform slow because script will have to resize and save it to server which is far away destined. It would be minor if there are few images but can be a problem when it's huge resizing even on high speed bandwidth and as PHP will not be able to release its resources used for image resizing until it has not completely saved the target image.
Second that if you are using a CDN (Content Delivery Network) then CDN uses PULL SERVER technique means that we do not push static content to CDN server but when a user/client ask for static content then CDN first checks its entire servers and if not found then it asks our main server for that.
Amazon S3 is not a true CDN. S3 was designed for content storage. The correct Amazon service to use for content delivery is Amazon CloudFront. And if we are saving files to any of our files to any storage server or CDN then that's called PUSH SERVER
A thorough article can be read on http://www.binarymoon.co.uk/2010/11/timthumb-cdn-amazon-s3-good/. That's actually about TimThumb but worth a good knowledge.
I ended up saving the file to the server and then uploading the file from there. If there is a better way then please let me know.
I'm writing a web app that at one point allows a user to upload a photo to a flickr account (mine). I want to do this without saving the intermediate image on the server my web app is on.
What I've got so far is a page which implements phpFlickr and accepts a POST from a simple html form. I use $_FILES['file']['tmp_name'] as the path for phpFlickr to use. Here's the code:
<?php
require_once("phpFlickr.php");
$f = new phpFlickr("apikey", "secret", true);
$_SESSION['phpFlickr_auth_redirect'] = "post_upload.php";
$myPerms = $f->auth("write");
$token = $f->auth_checkToken();
$phid = $f->sync_upload($_FILES['file']['tmp_name']);
echo "Uploading Photo..." . $phid;
?>
I'm guessing that the tmp file is being lost because of the redirect that happens when $f->auth("write") is called, but I don't know. Is there a way to preserve it? Is there any way to do this without saving the file to the server?
Answer: There is No way to directly upload a file to Flickr without saving it as an intermediate file.
I've moved on to using move_uploaded_file() followed by a flickr API call, and its working perfectly.
I've also managed to get it to play nice with the excellent Jquery Uploadify, which lets me send multiple files to it in one go.