javascript - Saving a blob to the server? -
so have program grabs meta data out of sound file.
if sound file has album image able turn blob object url , use locally, how able save blob image server?
right have 2 file input fields, 1 select sound file , 1 select image if there none pulled sound file.
i using musicmetadata (https://github.com/leetreveil/musicmetadata) , how pull image sound file.
musicmetadata(data, function(err, result){ if(err) console.log(err); if(result.picture.length > 0){ var picture = result.picture[0]; var url = url.createobjecturl(new blob([picture.data], {'type':'image/' + picture.format})); var image = document.getelementbyid('albumimage'); imagelist.innerhtml = "<p>" + result.title + "." + picture.format + "</p>"; image.style.backgroundimage = "url(" + url + ")"; image.style.backgroundrepeat = "no-repeat"; image.style.backgroundsize = "155px 131px"; bgimage = url; } else { imagelist.innerhtml = "<p>no image available in meta data<p>"; }
i've tried formdata set , append blob form once posted, passes either undefined or blob url blob:http://localhost:3000/5c9db74b-f4f1-4125-8839-a7604ec1f7f9
i using express multer handle file uploads. fine adding test conditions if there album image on post, save file system else save file file input image field.
here post request info upload in case.
var manageupload = upload.fields([{ name: 'fileelem', maxcount: 1 }, { name: 'imageelem', maxcount: 1 } ]); app.post('/upload', manageupload, function(req, res){ post = new post(); user.findone({ username: req.session.user }, function(err, newuser){ if(err) console.log(err); post.audiofile = req.files['fileelem'][0].filename; if(typeof req.files['imageelem'] !== "undefined"){ post.imagefile = req.files['imageelem'][0].filename; } post._user = newuser._id; post.title = req.body.title; post.artist = req.body.artist; post.start = req.body.start; post.stop = req.body.stop; post.genre = req.body.genre; post.tags = req.body.tags; post.save(function(err, newpost){ if(err) console.log(err); if(newpost){ res.redirect('/'); } }); }); });
so works how want besides being able save blob image directly server directory storing album images.
any on solving appreciated, thank you.
append [...] form once posted
you can't append form once has been posted. can delay submission of form until metadata fetched.
i've tried formdata set , append blob [...], passes either undefined or blob url
it looks passing url
variable form , not blob itself.
this snippet gives hint in right direction
$('#file-input').on('change', function() { var formdata = new formdata(); var file = this.files[0]; musicmetadata(file, function(err, result) { var picture = result.picture[0]; var picblob = new blob([picture.data], { 'type': 'image/' + picture.format }); formdata.append('fileelem', file); formdata.append('imageelem', picblob); console.log(formdata); // whatever want data }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/musicmetadata/2.0.2/musicmetadata.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="file-input" type="file" name="file">
Comments
Post a Comment