javascript - Filename not being used as AWS S3 name -
i using expressjs , trying post image aws s3 can used throughout app. have been next tutorial , while able upload image, filename beingness given default_name every single time , don't believe file format beingness attached string give file proper image format. when @ s3upload.js script provided in tutorial, notice default_name ths standard name provide files, i'm not sure why accepting file without using title.
events-create.ejs (where have upload):
<!doctype html> <html> <head> <% include ../partials/head %> </head> <body> <% include ../partials/navigation %> <div class="grid" id="create-event-container"> <div class="col-1-1"> <div id="create-event"> <h1><i>create event</i></h1> <input type="file" id="files"/> <p id="status">please select file</p> <div id="preview"><img src="/images/event-placeholder.png"></div> <form action="/admin/events/create" method="post"> <input type="hidden" id="speaker-image" name="speakerimage" value="/images/event-placeholder.png" /> name: <input type="text" name="name"><br> title: <input type="text" name="title"><br> company: <input type="text" name="company"><br> website: <input type="text" name="url"><br> <input type="submit" value="submit"><br> </form> </div> </div> </div> <script type="text/javascript" src="/js/s3upload.js" async></script> <script> console.log("s3 function launched"); function s3_upload(){ var status_elem = document.getelementbyid("status"); var url_elem = document.getelementbyid("speaker-image"); var preview_elem = document.getelementbyid("preview"); var s3upload = new s3upload({ file_dom_selector: 'files', s3_sign_put_url: '/sign_s3', onprogress: function(percent, message) { status_elem.innerhtml = 'upload progress: ' + percent + '% ' + message; }, onfinishs3put: function(public_url) { status_elem.innerhtml = 'upload completed. uploaded to: '+ public_url; url_elem.value = public_url; console.log(public_url); preview_elem.innerhtml = '<img src="'+public_url+'" style="width:300px;" />'; }, onerror: function(status) { status_elem.innerhtml = 'upload error: ' + status; console.log(status_elem.innerhtml); } }); } /* * hear file selection: */ (function() { var input_element = document.getelementbyid("files"); input_element.onchange = s3_upload; })(); </script> </body> </html> routes.js:
var express = require('express'); var router = express.router(); var event = require('./models/eventsmodel'); var http = require('http'); var path = require('path'); var aws = require('aws-sdk'); var aws_access_key = process.env.aws_access_key; var aws_secret_key = process.env.aws_secret_key; var s3_bucket = process.env.s3_bucket; router.get('/sign_s3', function(req, res){ aws.config.update({accesskeyid: aws_access_key, secretaccesskey: aws_secret_key }); var s3 = new aws.s3(); var s3_params = { bucket: s3_bucket, key: req.query.s3_object_name, expires: 60, contenttype: req.query.s3_object_type, acl: 'public-read' }; s3.getsignedurl('putobject', s3_params, function(err, data){ if(err){ console.log(err); } else{ var return_data = { signed_request: data, url: 'https://'+s3_bucket+'.s3.amazonaws.com/'+req.query.s3_object_name }; res.write(json.stringify(return_data)); res.end(); } }); }); router.route('/admin/events/create') .post(function(req, res){ var events = new event(); events.name = req.body.name; events.title = req.body.title; events.company = req.body.company; events.url = req.body.url; events.speakerimage = req.body.url; events.save(function(err){ if (err) res.send(err); res.redirect(303, '/events'); }); }) .get(function(req, res){ event.find(function(err, events){ if (err) res.send(err); res.render('pages/events-create.ejs'); }); }); s3upload.js:
(function() { window.s3upload = (function() { s3upload.prototype.s3_object_name = 'default_name'; s3upload.prototype.s3_sign_put_url = '/signs3put'; s3upload.prototype.file_dom_selector = 'file_upload'; s3upload.prototype.onfinishs3put = function(public_url) { homecoming console.log('base.onfinishs3put()', public_url); }; s3upload.prototype.onprogress = function(percent, status) { homecoming console.log('base.onprogress()', percent, status); }; s3upload.prototype.onerror = function(status) { homecoming console.log('base.onerror()', status); }; function s3upload(options) { if (options == null) options = {}; (option in options) { this[option] = options[option]; } this.handlefileselect(document.getelementbyid(this.file_dom_selector)); } s3upload.prototype.handlefileselect = function(file_element) { var f, files, output, _i, _len, _results; this.onprogress(0, 'upload started.'); files = file_element.files; output = []; _results = []; (_i = 0, _len = files.length; _i < _len; _i++) { f = files[_i]; _results.push(this.uploadfile(f)); } homecoming _results; }; s3upload.prototype.createcorsrequest = function(method, url) { var xhr; xhr = new xmlhttprequest(); if (xhr.withcredentials != null) { xhr.open(method, url, true); } else if (typeof xdomainrequest !== "undefined") { xhr = new xdomainrequest(); xhr.open(method, url); } else { xhr = null; } homecoming xhr; }; s3upload.prototype.executeonsignedurl = function(file, callback) { var this_s3upload, xhr; this_s3upload = this; xhr = new xmlhttprequest(); xhr.open('get', this.s3_sign_put_url + '?s3_object_type=' + file.type + '&s3_object_name=' + this.s3_object_name, true); xhr.overridemimetype('text/plain; charset=x-user-defined'); xhr.onreadystatechange = function(e) { var result; if (this.readystate === 4 && this.status === 200) { seek { result = json.parse(this.responsetext); } grab (error) { this_s3upload.onerror('signing server returned ugly/empty json: "' + this.responsetext + '"'); homecoming false; } homecoming callback(result.signed_request, result.url); } else if (this.readystate === 4 && this.status !== 200) { homecoming this_s3upload.onerror('could not contact request signing server. status = ' + this.status); } }; homecoming xhr.send(); }; s3upload.prototype.uploadtos3 = function(file, url, public_url) { var this_s3upload, xhr; this_s3upload = this; xhr = this.createcorsrequest('put', url); if (!xhr) { this.onerror('cors not supported'); } else { xhr.onload = function() { if (xhr.status === 200) { this_s3upload.onprogress(100, 'upload completed.'); homecoming this_s3upload.onfinishs3put(public_url); } else { homecoming this_s3upload.onerror('upload error: ' + xhr.status); } }; xhr.onerror = function() { homecoming this_s3upload.onerror('xhr error.'); }; xhr.upload.onprogress = function(e) { var percentloaded; if (e.lengthcomputable) { percentloaded = math.round((e.loaded / e.total) * 100); homecoming this_s3upload.onprogress(percentloaded, percentloaded === 100 ? 'finalizing.' : 'uploading.'); } }; } xhr.setrequestheader('content-type', file.type); xhr.setrequestheader('x-amz-acl', 'public-read'); homecoming xhr.send(file); }; s3upload.prototype.uploadfile = function(file) { var this_s3upload; this_s3upload = this; homecoming this.executeonsignedurl(file, function(signedurl, publicurl) { homecoming this_s3upload.uploadtos3(file, signedurl, publicurl); }); }; homecoming s3upload; })(); }).call(this);
i came across same issue, how tackled within node controller:
aws.config.update({accesskeyid: aws_access_key, secretaccesskey: aws_secret_key}); var s3 = new aws.s3(); // set extension switch(req.query.s3_object_type) { case 'image/png': var ext = '.png'; break; case 'image/gif': var ext = '.gif'; break; case 'image/jpg': case 'image/jpeg': var ext = '.jpg'; break; } // rename file var name = math.floor(new date() / 1000); // set s3 var s3_params = { bucket: s3_bucket, key: 'blog/'+name+ext, expires: 60, contenttype: req.query.s3_object_type, acl: 'public-read' }; // send s3 s3.getsignedurl('putobject', s3_params, function(err, data){ if(err){ console.log(err); } else{ var return_data = { signed_request: data, url: 'https://'+s3_bucket+'.s3.amazonaws.com/'+name+ext }; res.write(json.stringify(return_data)); res.end(); } }); so can see pretty simple solution problem, check extension , rename file. hope helps.
javascript node.js amazon-web-services express
No comments:
Post a Comment