Develop Reference

Save/upload video file from local drive to Azure blob storage via API?

I am currently using this code to select a video file from local disk (via webpage using ) and send that to my api:
<form enctype="multipart/form-data">
<input name="file" type="file" accept="video/*"/>
<input type="button" value="Upload" />
</form>
<progress></progress>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(':file').on('change', function () {
var file = this.files[0];
if (file.type !== "video/mp4" && file.type!== "video/quicktime") {
alert("Content must be video .mp4 or .mov")
}
$(':button').on('click', function () {
if (file.type == "video/mp4" || file.type == "video/quicktime"){
$.ajax({
// Your server script to process the upload
url: 'azureAPI',
type: 'POST',
// Form data
data: new FormData($('form')[0]),
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
}
});
} else {
alert ("File type must be .mp4 or .mov")
}
});
});
});
</script>
This sends (what I am assuming is) binary data in the form of this:
���
1!QAa"q2B���R�#3br��u�����S6C$%��5�cts�T&D4��U��d���e!1AQa2"q�#����3��B���X"��?��!=��W�u�ٗ�-2���?����ۯ�Կ�i���t����M���Y�-��-Vdϊ�P�<�<U#TY]K��dW
���
I believe this includes webkitform boundary etc.
I am now trying to save that binary data to a block blob, however I am having trouble saving binary data to Azure block blob using:
var buf = Buffer.from(req.body, 'binary');
blobService.createBlockBlobFromText(container, 'fileName.mp4', buf, {contentSettings: {contentType: 'video/mp4', contentEncoding: 'binary'}}, function (error, result, response) {
if(!error){
callback('uploaded');
} else {
callback('nope');
}
});
I have also tried to create a readable stream:
var container = 'abc';
var azure = require('azure-storage');
const getStream = require('into-stream');
var blobService = azure.createBlobService();
module.exports = function (context, req) {
var json = req.body;
save (context, json, function(result){
context.log(result);
context.done();
})
}
function save (context, json, callback){
var buf = Buffer.from(json);
var stream = getStream(buf);
var streamLength = buf.length;
blobService.createBlockBlobFromStream(container, 'fileName.mp4', stream, streamLength, {contentSettings: {contentType: 'video/mp4'}}, function (error, result, response) {
if(!error) {
callback('uploaded');
} else {
callback('nope');
}
});
}
I tried this, without the contentSettings at first but that saved the data as contentType: application/octet-stream which wasn't opening as a video. I then added contentType, and lastly tried adding contentEncoding as well.
This saved the correct contentType but still the video could not be opened.
Does anyone know how to save binary data to Azure blob storage via this method? It seems to save the file, but when trying to open it, it is corrupted/not encoded correctly? I am unsure of the issue. Perhaps I need to remove the webkitform boundary etc data from it before saving?
Thanks for any pointers, apologies if I left anything out.

Upload multiple image over a single in jquery file upload [duplicate]

My problem is simple and complex same time:
Im tryin to upload files using jQuery fileUpload library with spring mvc controller as server side, but my files are being uploaded by one request each. What i want is posting them ALL in ONE request.
I have tried singleFileUploads: false option but its not working, if i pass 4 files to upload, the method responsible for handling the post is called 4 times.
Im using this form to post files:
<div class="upload-file-div">
<b>Choose csv files to load</b> <input id="csvUpload" type="file"
name="files[] "data-url="adminpanel/uploadCsv" multiple />
</div>
<div id="dropzoneCsv">Or drop files here</div>
<div id="progressCsv">
<div class="bar" style="width: 0%;"></div>
</div>
Jquery method to upload files:
$('#csvUpload').fileupload(
{
singleFileUploads: false,
dataType : 'json',
done : function(e, data) {
$("tr:has(td)").remove();
$.each(data.result, function(index, file) {
$("#uploaded-csv").append(
$('<tr/>').append(
$('<td/>').text(file.fileName))
.append(
$('<td/>').text(
file.fileSize))
.append(
$('<td/>').text(
file.fileType))
.append(
$('<td/>').text(
file.existsOnServer))
.append($('<td/>')));
});
},
progressall : function(e, data) {
var progress = parseInt(data.loaded / data.total * 100,
10);
$('#progressCsv .bar').css('width', progress + '%');
},
dropZone : $('#dropzoneCsv')
});
And handler method :
#RequestMapping(value = "/adminpanel/uploadCsv", method = RequestMethod.POST)
public #ResponseBody
List<FileMeta> uploadCsv(MultipartHttpServletRequest request, HttpServletResponse response) {
// 1. build an iterator
Iterator<String> itr = request.getFileNames();
MultipartFile mpf = null;
List<FileMeta> csvFiles = new ArrayList<FileMeta>();
// 2. get each file
while (itr.hasNext()) {
// 2.1 get next MultipartFile
mpf = request.getFile(itr.next());
System.out.println(mpf.getOriginalFilename() + " uploaded! ");
// 2.3 create new fileMeta
FileMeta fileMeta = new FileMeta();
fileMeta.setFileName(mpf.getOriginalFilename());
fileMeta.setFileSize(mpf.getSize() / 1024 + " Kb");
fileMeta.setFileType(mpf.getContentType());
try {
File dir = new File(Thread.currentThread().getContextClassLoader()
.getResource("").getPath()+"CSV");
if(!dir.exists()) dir.mkdirs();
File newCSV = new File(dir+"\\"+ mpf.getOriginalFilename());
if(!newCSV.exists())
{
mpf.transferTo(newCSV);
fileMeta.setExistsOnServer(false);
}
else fileMeta.setExistsOnServer(true);
} catch (IllegalStateException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
// 2.4 add to files
csvFiles.add(fileMeta);
}
return csvFiles;
}
I would really need an assistance here :( Files should be loaded in one request, thats why im doing the iterator, but its just not working.
ps. Sorry for my terrible english :(

You may want to try Programmatic file upload instead. The send method will ensure only one request is issued.
Basically keep a filelist variable, update it everytime fileuploadadd callback happens, then use this filelist for the send method.
For example:
$document.ready(function(){
var filelist = [];
$('#form').fileupload({
... // your fileupload options
}).on("fileuploadadd", function(e, data){
for(var i = 0; i < data.files.length; i++){
filelist.push(data.files[i])
}
})
$('#button').click(function(){
$('#form').fileupload('send', {files:filelist});
})
})
It is inspired by this question.
The reason I found it useful is even if you set singleFileUploads to false, if you do multiple individual selections, they will still be sent with individual requests each, as the author said himself in this GitHub issue

File path of image on server

I have an image saved on my server which I want to display on the client.
EDIT: I select an image from a list of up to 80. This image is then resized if needed and returned to the client.
My server is running on IIS7 # localhost:1337 .
Server file location:
C:\inetpub\wwwroot\API\Cyber\4076\1\img\resized\1.jpg
This is the path that's returned when I return the absolute path to the client (see code below). The client however can't find this file.
My Client is running on IIS7 #localhost:15536.
With the help of firebug I can set the source of the Image object in the client application to the location of the file on the server under localhost.
localhost:1337/Cyber/4076/1/img/resized/1.jpg
It then correctly displays the image.
Question
What changes do I make so that the changes I did manually happen automatically? How do I create/return the second link and use it in the client opposed to the first link?
Server API call
/// <summary>
/// Method to retrieve files from the server. Files will be searched in the requested map depending on size.
/// The resized image will be saved on the server and the location will be send to the client.
/// </summary>
/// <returns>A response message with the location of the newly resized file.</returns>
public HttpResponseMessage getFileResized(string name, int collectionId, int maxWidth, int maxHeight, int version = 1)
{
// create real file path
string basePath = FileService.GetPath(collectionId, CollectionType.collection, version) + #"\img\"; //HostingEnvironment.MapPath("~/Cyber/" + collectionId + "/img/");
string filePath = basePath + #"resized\";
// Standard location of the file when it's uploaded to the server.
string fileBase = basePath + name;
// New location for the resized file on the server.
string fileExact = filePath + name;
try
{
if (!File.Exists(filePath))
{
// create new directories for resizes
Directory.CreateDirectory(filePath);
}
if (//File.Exists(fileBase)) &&
!File.Exists(fileExact))
{
Logger.log("File found but resize missing. Creating resized...");
ImageService.createResizedFile(name, basePath, maxWidth, maxHeight);
}
// check if path and file exist
string file = Directory.GetFiles(filePath, name, SearchOption.TopDirectoryOnly).FirstOrDefault();
if (file != null)
{
// retrieve the file location, write headers and return it
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Accepted);
response.Headers.Location = new Uri(file);
return response;
}
else
{
// file does not exist at the selected location
Logger.log("Resized image file does not exist on location: {0}.", fileExact);
throw new HttpResponseException(HttpStatusCode.NotFound);
}
}
catch (DirectoryNotFoundException)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
}
Client retrieves the file location like this
HttpResponseMessage responseMessage = client.GetAsync("api/file/getFileResized?name=" + fileName + "&collectionId=" + CollectionId
+ "&maxWidth=" + maxWidth + "&maxHeight=" + maxHeight + "&version=" + Version).Result;
string sourceResponse = "";
if (responseMessage.IsSuccessStatusCode)
{
sourceResponse = responseMessage.Headers.Location.AbsolutePath;
return Json(new { OK = 1, message = sourceResponse, refresh = true }, "text/html");
}
The source is put into the image src with javascript and Jquery
$("#editorModal").on("shown.bs.modal", function () { showImage(); })
function showImage() {
console.log("ShowImage resizedSource");
console.log(resizedSource);
$("#selectedImage").attr("src", resizedSource);
}
resizedSource is set in this handler
function getResizedImage() {
$.ajax({
url: "/NextprintPhotobook/GetResizedImageFile",
type: "POST",
data: JSON.stringify({ imageSource: imageSource }),
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function (data) {
if (data.OK != 1) {
showError("Er is een fout opgetreden bij het openen van de foto. Data niet OK.", data.message, data.refresh);
}
console.log("getResizedImage data.message");
console.log(data.message);
resizedSource = data.message;
},
error: function (data) {
showError("Er is een fout opgetreden bij het openen van de foto.");
}
});
}

Simply save the image path in the <appSettings> block of web.config with respect to your server
<add key="ImagePath" value="localhost:1337/Cyber/4076/1/img/resized/" />
And then get the path from this key and the image name from database. Then finally create a URL like this:
ImageUrl = ConfigurationManager.AppSettings["ImagePath"]+ ImageName;
Where ImageName is the name of image extracted from database. Return the ImageUrl to the client which will be
localhost:1337/Cyber/4076/1/img/resized/1.jpg
when ImageName=1.jpg
Or you can also do the following for dynamic application path
var context = HttpContext.Current;
string appPath = string.Format("{0}://{1}{2}{3}",
context.Request.Url.Scheme,
context.Request.Url.Host,
context.Request.Url.Port == 80 ? string.Empty : ":" + context.Request.Url.Port,
context.Request.ApplicationPath);
And use this appPath for setting the relative path to the localhost dynamically.

get response from servel on ajax call when uploading file with multidata form

I'm with a little problem on my project.
Hi have several jsp's and Java class. In one jsp i create a form with only a input type="file" and type="submit", then I have an ajax call and send all the formdata to a doPost class on my servel. Then I send that file to the DataBase and it all's go fine, my problem is I want to return the id from the database to the .jsp. I can access and have prints on the doPost to check my key, but cant send it to success function inside the ajax call..
Here's my code, i really apreciate any kind of help, thanks!
<form id="uploadDocuments" target="invisible" method="POST" action="UploadDocumentsAjaxService" enctype="multipart/form-data">
<iframe name="invisible" style="display:none;"></iframe>
<h3 style="width: 71%;margin-left: 8%;">ANEXAR FICHEIROS:</h3>
<h4 style="margin-left: 8%; color: #F7A707" >Escolher ficheiro para anexar: </h4>
<input type="file" id="file_input" name="file" size="50" style="width: 60%; margin-left: 8%;"/>
<input type="submit" value="Upload" />
</form>
the I have my Ajax Call:
$("#uploadDocuments").submit(function (e) {
alert(10);
alert($("#uploadDocuments").attr('action'));
$.ajax({
type: $("#uploadDocuments").attr('method'),
url: $("#uploadDocuments").attr('action'),
contentType: $("#uploadDocuments").attr( "enctype"),
data: new FormData($("#uploadDocuments")[0]),
processData: true,
success: function (data) {
alert("submitDocument");
alert();
/* key = data;
addFilesToTable(key); */
return true;
}
});
e.preventDefault();
$(form).off('submit');
return false;
});
And then my servlet class:
protected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException{
response.setContentType("text/html;charset=ISO-8859-1");
PrintWriter out = response.getWriter();
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
ChangeEntityRequestActionBean actionBean = new ChangeEntityRequestActionBean();
if(!isMultipart)
return;
// Create a factory for disk-based file items
DiskFileItemFactory factory = new DiskFileItemFactory();
// Sets the size threshold beyond which files are written directly to
// disk.
factory.setSizeThreshold(MAX_MEMORY_SIZE);
// constructs the folder where uploaded file will be stored
String uploadFolder = getServletContext().getRealPath("") + DATA_DIRECTORY;
// Create a new file upload handler
ServletFileUpload upload = new ServletFileUpload(factory);
// Set overall request size constraint
upload.setSizeMax(MAX_REQUEST_SIZE);
String fileName = "";
Long documentKey = null;
String key = "";
try {
// Parse the request
List items = upload.parseRequest(request);
Iterator iter = items.iterator();
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
if (!item.isFormField()) {
fileName = new File(item.getName()).getName();
String filePath = uploadFolder + File.separator + fileName;
File uploadedFile = new File(filePath);
System.out.println(filePath);
// saves the file to upload directory
item.write(uploadedFile);
}
documentKey = actionBean.insertDocument(item, fileName);
System.out.println("Key from DAO ------->>>>>"+documentKey);
key = String.valueOf(documentKey);
}
System.out.println("Key in String from DAO ----->"+key);
System.out.println();
out.println("success");
response.flushBuffer();
}catch (FileUploadException ex) {
throw new ServletException(ex);
} catch (Exception ex) {
throw new ServletException(ex);
} finally {
out.close();
}
}
All I want is to send the key value to out.println so I can use that value on a jquery function

In the first line of doPost() in your servlet, change the content-type of the response to "application/json". Then write a JSON string to the output stream. There are libraries available to do this for you, but for something so simple, you can compose the JSON yourself. This might actually have an advantage because your key is a java long; treat it as a string and you don't have to worry about how the integer is represented.
// replace out.println("success"); with this:
out.print("{\"key\": \"" + key + "\"}");
Then in the success callback function, you can access the key as a field of the data object. You'll need to specify the data type in the ajax method (dataType: 'json').
success: function (data) {
var key = data['key'];
addFilesToTable(key);
return true;
}

Uploadify response value is always undefined from ASP.NET

I'm using Uploadify to upload some images with ASP.NET.
I use Response.WriteFile() in ASP.NET to return the result of the upload back to JavaScript.
As specified in the documentation I'm using onAllComplete event to check for response string from ASP.NET.
The problem is it that the alert(response); is always undefined in JavaScript.
JavaScript code as below:
$(document).ready(function() {
var auth = "<% = Request.Cookies[FormsAuthentication.FormsCookieName]==null ? string.Empty : Request.Cookies[FormsAuthentication.FormsCookieName].Value %>";
$('#btnUpdateProfileImg').uploadify({
'uploader': '../script/uploadify/uploadify.swf',
'script': '../uploadprofimg.aspx',
'cancelImg': '../script/uploadify/cancel.png',
'folder': '../script/uploadify',
'scriptData': { 'id': $(this).attr("id"), 'token': auth },
'onAllComplete': function(event, queueID, fileObj, response, data) {
alert(response);
}
});
});
ASP.NET code a below;
protected void Page_Load(object sender, EventArgs e)
{
try
{
string token = Request.Form["token"].ToString();
FormsAuthenticationTicket ticket = FormsAuthentication.Decrypt(token);
if (ticket != null)
{
var identity = new FormsIdentity(ticket);
if (identity.IsAuthenticated)
{
HttpPostedFile hpFile = Request.Files["ProfileImage"];
string appPath = HttpContext.Current.Request.ApplicationPath;
string fullPath = HttpContext.Current.Request.MapPath(appPath) + #"\avatar\";
hpFile.SaveAs(Server.MapPath("~/" + uniqName));
Response.ContentType = "text/plain";
Response.Write("test");
}
}
}
catch (Exception ex)
{
Response.Write("test");
}
}
Reason for the FormsAuthenticationTicket object is to pass the authentication cookie though when using the Uploadify with Firefox.
I have seen many examples where Response.Write returns a value back to the onAllComplete event. But all I get is undefined.
I have also tried to use Context.Response.Write, this.Response.Write, HttpContext.Current.Response.Write. They all return undefined.
Any help appreciated.
Thanks

It seems that the onAllComplete event never fires. This is possibly because I'm automatically uploading single files rather than multiple files.
I find that the onComplete event fires and I can use that instead.