Develop Reference

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.

node.js download images to server from list of http requests

I'm very new at node so bear with me. I'm trying to download a series of images from an external server. So far I have been able to get it working on a limited basis. When I run the below code, only about half of the images make it though to the web page. I know that I'm not doing this correctly, and am looking for some guidance. Here is the code that I have so far
var request = require("request"),
fs = require("fs"),
views = ['sitename1', 'sitename2', 'sitename3'...]
for (var view in views) {
request({
url: 'http://' + SERVERURL + '/api/2.2/sites/' + siteID + '/workbooks/' + views[view]['workbookID'] + '/views/' + views[view]['id'] + '/previewimage',
headers: {
'Content-Type': 'image/png',
'X-Tableau-Auth': authToken
}
, encoding: 'binary'}).pipe(
fs.createWriteStream('./public/images/thumbnails/' + SITE + '/views/' + views[view]['url'] + '.png'
))
};
I want to point out that this does get some of the images saved correctly. I believe what I'm missing is a callback to make sure that the file has been successfully saved before moving on to the next item in the list. I have no idea how to implement that.
Another quick note (not important) is that I'm trying to download images from a Tableau Server using the REST api.

The face you're getting about half the images makes me wonder if you are using Tableau Online? If so, you need to ensure you're using the URI per the docs (http://onlinehelp.tableau.com/current/api/rest_api/en-us/help.htm#REST/rest_api_concepts_fundamentals.htm#tableau-online-uris).

Just figured it out using the async module
async.eachSeries(views, (function(view, callback) {
var thumbPath = 'public/images/thumbnails/' + req.session.SITE + '/views/' + req.session.views[view]['url'] + '.png'
request({
url: 'http://' + SERVERURL + '/api/2.2/sites/' + req.session.siteID
+ '/workbooks/' + req.session.views[view]['workbookID'] + '/views/' + req.session.views[view]['id'] + '/previewimage',
headers: {
'Content-Type': 'image/png',
'X-Tableau-Auth': req.session.authToken
}
}).pipe(
upload(thumbPath));
callback()
}),
function(err){
if(err){
console.log("a thumb failed to download")
} else {
console.log("all thumbs downloaded")
}
}
)

How do i force download Video in AngularJs from Amazon S3?

I have written code to download a video uploaded to amazon s3 using aws javascript sdk. Everything works fine but for some videos open up in the browser and start playing. Here is the code below:
View:
Download Video
Controller:
$scope.downloadVideo = function (video) {
videoLocation = video.video_location;
var bucketPath = videoLocation.substring(0, videoLocation.lastIndexOf("/") + 1);
bucketPath = bucketPath.substring(0, bucketPath.length - 1);
var fileName = videoLocation.substring(videoLocation.lastIndexOf("/") + 1, videoLocation.length);
var videoSignedUrl = VideoFactory.downloadVideo(bucketPath,fileName);
$window.open(videoSignedUrl);
}
VideoFactory :
downloadVideo: function (bucketPath,fileName) {
bucketName = aws.bucket_name;
options = {
accessKeyId : 'XXXXXXXXXXXXXXXXXXXXX',
secretAccessKey : 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
region : 'XXXXXX'
}
var params = {
Bucket: bucketName + '/'+ bucketPath, Key: fileName, Expires: 60
};
var s3 = new AWS.S3(options);
var url = s3.getSignedUrl('getObject', params);
return url;
}
So when videos open up in a new window they start getting downloaded at the bottom of the browsers. But for some unknown videos they open up in a window and start playing. How can i stop this in angularjs. What is the suggested workaround and how do others handle this kind of issues??
I did google but most of the stackoverflow answers here say to open files in window and browsers automatically downloads it.

Try this solution it may help you.enter link description here
View:
Download Video
<a id="ExportToExcel" style="display: none;"></a>
Controller:
$scope.downloadVideo = function (video) {
videoLocation = video.video_location;
var bucketPath = videoLocation.substring(0, videoLocation.lastIndexOf("/") + 1);
bucketPath = bucketPath.substring(0, bucketPath.length - 1);
var fileName = videoLocation.substring(videoLocation.lastIndexOf("/") + 1, videoLocation.length);
var videoSignedUrl = VideoFactory.downloadVideo(bucketPath,fileName);
document.getElementById("ExportToExcel").href = videoSignedUrl;
document.getElementById("ExportToExcel").click();
}

The trick that worked was making the video as an attachment during the video upload to S3 :
options = {
accessKeyId : 'xxxxxxxxxxxxxxxxxxxxxxx',
secretAccessKey : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
region : 'xxxxxx'
}
var s3 = new AWS.S3(options);
var params = {
Bucket : bucketName + '/' + bucketStructure,
Key: fileName,
ContentType: file.type,
Body: file,
ServerSideEncryption: 'AES256',
ACL : 'private',
ContentDisposition: 'attachment; filename=' + fileName,
ContentType: 'application/octet-stream'
};
s3.putObject(params, function(err, data) {
if(err) {
// There Was An Error With Your S3 Config
console.log('AWS Error : '+err.message);
return false;
}
else {
console.log('AWS Video upload done!');
}
})
This would make the video to force download automatically when a signed url was used. Has worked for most of the video mime types for me.

Google Drive uploads file OK but cannot view it

The code below is working at loading a PDF file (created with jsPDF) into my Google Drive folder. It is essentially Google Drive the Quickstart code modified.
The PDF generated looks OK when viewed inside the browser that is opened with "docMenu.output('dataurlnewwindow');"
The PDF file appears OK in my Google Drive folder, but when I go to view it I get a grey screen with "Failed to load PDF document". I have no execution errors in console / inspect.
What have I missed? Have I messed up by pulling the Blob (data URI) and feeding it to Google Drive upload?
Many thanks!
<script type="text/javascript">
var CLIENT_ID = 'my-client-id';
var SCOPES = 'https://www.googleapis.com/auth/drive';
var FOLDER_ID = 'my-folder-id';
/**
* Called when the client library is loaded to start the auth flow.
*/
function handleClientLoad() {
window.setTimeout(checkAuth, 1);
}
/**
* Check if the current user has authorized the application.
*/
function checkAuth() {
gapi.auth.authorize(
{'client_id': CLIENT_ID, 'scope': SCOPES, 'immediate': true},
handleAuthResult);
}
/**
* Called when authorization server replies.
* #param {Object} authResult Authorization result.
*/
function handleAuthResult(authResult) {
if (authResult && !authResult.error) {
// Access token has been successfully retrieved, requests can be sent to the API.
var docMenu = new jsPDF('p', 'cm', 'a5'); <-- Create PDF document
docMenu.text(2, 1, "Testing"); <-- Add text here...
docMenu.text(2, 5, "Testing");
docMenu.text(2, 10, "Testing");
docMenu.text(2, 15, "Testing");
docMenu.text(2, 20, "Please order and pay at the counter.");
docMenu.output('dataurlnewwindow'); <-- Displays PDF perfectly
var MyBlob = docMenu.output('blob'); <-- get PDF Blob
MyBlob.name = "test.pdf"; <-- Give it a file name
insertFile(MyBlob); <-- send it to Google Drive upload routine
} else {
alert("FAILED AUTHORIZING");
}
}
/**
* Start the file upload.
* #param {Object} evt Arguments from the file selector.
*/
function uploadFile(evt) {
gapi.client.load('drive', 'v2', function() {
var file = evt.target.files[0];
insertFile(file);
});
}
/**
* Insert new file.
* #param {File} fileData File object to read data from.
* #param {Function} callback Function to call when the request is complete.
*/
function insertFile(fileData, callback) {
const boundary = '-------314159265358979323846';
const delimiter = "\r\n--" + boundary + "\r\n";
const close_delim = "\r\n--" + boundary + "--";
var reader = new FileReader();
reader.readAsBinaryString(fileData);
reader.onload = function(e) {
var contentType = fileData.type || 'application/octet-stream';
var metadata = {
'title': fileData.name,
'mimeType': contentType,
'parents': [{"id":FOLDER_ID}]
};
var base64Data = btoa(reader.result);
var multipartRequestBody =
delimiter +
'Content-Type: application/json\r\n\r\n' +
JSON.stringify(metadata) +
delimiter +
'Content-Type: ' + contentType + '\r\n' +
'Content-Transfer-Encoding: base64\r\n' +
'\r\n' +
base64Data +
close_delim;
var request = gapi.client.request({
'path': '/upload/drive/v2/files/',
'method': 'POST',
'params': {'uploadType': 'multipart'},
'headers': {
'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
},
'body': multipartRequestBody});
if (!callback) {
callback = function(file) {
console.log(file)
};
}
request.execute(callback);
}
}
</script>

Do you think you need to change the file's permissions in Google Drive when it is created so that "anyone with a link" can view it or make it public?
Could it be the file is corrupt and Google Drive can't read it, but the docMenu.output method somehow isn't affected by the corruption? I have had something similar happen before.
I don't really have any experience with creating PDFs, but I hope my suggestion may at least point you in the right direction if it's correct.

For those who it may help, the above code works perfectly for me in creating and uploading PDF files to Google Drive using jsPDF.
The issue I was facing was one of Drive not liking this PDF for some reason (as it is reported with other PDFs in forums).
The file downloads OK and opens perfectly in Acrobat, Foxit and others... the problem is with Google.

Real AJAX uploader - set file to upload manually

I used the Real Ajax Uploader (http://www.albanx.com/ajaxuploader) for uploading files from my js/jQuery based frontend to an ASP.net based server-side function - that works well by selecting files from the file-system as via the file dialog.
But now i need to find a way to set a file (i know the exact name and local path of the file) to upload automatically via a JS function instead of selecting it manually by clicking "select file" and selecting it from the file-dialog.
I think i have to manually create a file-object and push it into the files array (because of this description to get fiel infos : http://www.albanx.com/ajaxuploader/examples.php?e=6) but I can not manage setting a file and uploading it via my js function
Any help is highly appreciated
Thanks in advance
EDIT:
Thanks for responding Here is the code for taking a picture with the devices camera and pushing it into the files object of the uploader ...
that works so far, but i do not know how to update the fileuploader because it seems not to have a method to do this ...
so the file is in the file-list (file_list[0]) with all the parameters i think it dioes need, but it doesnt show up in the gui-file-list
regards Don
<code>
// photo functions
function getPhoto(){
navigator.camera.getPicture(onPhotoSuccess, onPhotoFail, {
quality: 50,
destinationType: Camera.DestinationType.NATIVE_URI
});
console.log("get photo ...");
}
function onPhotoSuccess(imageURI) {
console.log("photo taken ..." + imageURI);
$('#imgUploadArea').ajaxupload('clear');
var AU = $('#imgUploadArea').data('AU');
var file_list = AU.files; //get all the file objects
console.log("files: " + file_list.length);
// get the file object
window.resolveLocalFileSystemURL(imageURI, function(fileEntry) {
fileEntry.file(function(fileObj)
{
fileuploadShow("input.caseFormText.caseFormPhotoBtn");
// add the image
var capturedImg = new Object();
capturedImg.status = 0;
capturedImg.name = fileEntry.name;
capturedImg.path = fileEntry.fullPath;
capturedImg.size = fileObj.size;
capturedImg.filetype = "image.jpeg";
capturedImg.ext = "jpg";
capturedImg.AU = AU;
capturedImg.file = fileObj;
console.log("set image object to upload: " + capturedImg.path);
file_list.push(capturedImg);
console.log("files: " + file_list.length);
console.log("imgUpload ... imagedata path: " + file_list[0].path);
console.log("imgUpload ... imagedata name: " + file_list[0].name);
console.log("imgUpload ... imagedata status: " + file_list[0].status);
console.log("imgUpload ... imagedata size: " + file_list[0].size);
console.log("imgUpload ... imagedata filetype: " + file_list[0].filetype);
console.log("imgUpload ... imagedata ext: " + file_list[0].ext);
console.log("imgUpload ... imagedata file: " + JSON.stringify(file_list[0].file));
console.log("file added to filelist: " + file_list.length);
var files = $("#imgUploadArea").ajaxupload('getFiles');
console.log(JSON.stringify(files));
//$("#imgUploadArea").ajaxupload.('renderHtml');
//$("#imgUploadArea").ajaxupload('start');
});
});
}
function onPhotoFail(message) {
alert('Photo failed because: ' + message);
}
</code>
Don