We Keep Coding

Problem dowloading a pdf file through browser using javascript

I have to present for an exam a portfolio which allows visitors to download some documentations about my projects as pdf files.
I tried using an tag with a "download" attribute, unfortunately when I try to download the file by clicking on the link, the file is proposed to be recorded as .html or all files.
Whatever option I choose, after downloading the file, I'm not able to open it because it seems damaged or in the wrong format.
Here's the code I use :
My "demo" var is contained in an object Work as you can see on the screenshot :
In case it matters, my pdf file is stored here:
Thanks for you help ! =)

As a wild guess :
your path is wrong (documents/pdt-test.pdf)
your html is missing a doctype or a proper structure
you need a doctype/pdf somewhere. Something like in here Download a by ByteArray as pdf /handle error in React

Display image on Html page

I'm trying to display a static image located in the same folder as my Html file but it seems I can't get the right path for it to display correctly. The application I'm developing is an atlassian plugin that also includes a java backend to get Data from the Database and I'm displaying it on the frontend using HTML and javascript, the whole application runs on a webserver as a Plugin. Both the image and the Html file are located in here: D:\clone4\project\src\main\resources\templates\scheduleraction
The URL path for the web application is:
https://staging.com/jira/secure/SchedulerAction!default.jspa
I tried many ways and this is the last one :
<img src="/SchedulerAction!default.jspa/piechart.jpg" alt="pie-chart">
I need to add the correct path in the "src" so the client can retrieve the image from my Files on the webserver. I would love any hint or help!

you should use exact path like ./Image.png. And avoid using Images out of the static HTML file located directory

Try to use a service to upload that image and use the provided url.
Such as https://imgur.com/. After upload it, use into the src the correct url with the filetype extension.

How to change filename when downloading file from server using javascript

I am downloading some images from facebook just for learning HTML and JS. But I don't want the filename to be some long string (contains some long string of numbers and chars ).
For eg I am using HTML5 download attribute
<a href="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xlt1/v/t1.0-9/12109181_503948273111743_2421725301227286538_n.jpg?oh=08c71f2236eaacc243ccd36475b4634e&oe=56BAA86C&__gda__=1459095933_f07fc4bb7bf54f48ac0b9286f8bc92c6"
download="imagename.jpg">
Download Image
</a>
Or this is JSFiddle of above code
When I click this link the file is download but with different name. My question is how do I change the filename something like images.jpg
Is it possible? If yes how should I go further.

The default filename is sent by the server through HTTP header:
Content-Disposition: attachment; filename='somefile'
Code that runs on the client has very limited control over files for security reasons. The only fix I can see is to have some server code which downloads the file from the other domain and then send it back with a new filename. So no, JS can't fix that for you.

I am relatively sure that the download attribute will only rename files that you are hosting, and not remote files.
You question is similar to this one:
Using download attribute with remote file
There is a workaround solution mentioned in that answer, but it's probably out of scope for just simple learning exercise.

Is it possible in Javascript to open a directory and read an image file and display it to html?

I was wondering if it is possible in JS to open a directory, read an image file and display it to Html? I believe JS restricts from being able to open any file in a directory directly, but what I want is:
I have a XML file which will contain the path to a image file in the web server root folder
so my hierarchy is like this
webserver root folder--->|
html
js
css
images
xml
, and I will use XmlHttpRequest and feed the directory tag and file name tag to my JS file which has to display the image to my frame in the Html page.
[My image is also in the same webserver root folder but in a different folder from html]
Any pointers on how to go about it? I guess we can store the image file also in XML as a base64 encoded data, but that would make the data exchange huge, also don't know if this is a ideal method (is it? please suggest)
Please give me some tips for this.
Thanks
Balaji R

JavaScript does not have access to filesystem on server, since it runs on the client side.
But with JavaScript or Ajax you can call some php code on server which will read the image from the file system and then it will pass this image back to the JavaScript.
I have described here how to do this.

If I am following you correctly, example.com/js/somefile.js is trying to access something like example.com/images/image.jpg?
If so then i would either use the absolute URL of the image:
"http://www.example.com/images/image.jpg" or the relative path "../images/image.jpg"
When referencing the images in your code you could actually use a plain text file, one image path per line. Then in your onreadystatechange function:
pictures = var.responseText.split("\n");
now pictures is an array of picture paths.

JavaScript only has access to the information & priviledges that the browser has access to, so unless the image is in a directory that would normally be accessible on the web site, you're not going to have much luck using just JavaScript.
Is there any way that you can make the path in the filesystem available to the web document root folder? Maybe by using an Alias or Symlink?

loading an image through javascript

is there a way to load the full binary of an image in javascript?
what i want to do is to allow the user to preview an image before uploading it.
ie the user selects an image on his local drive (C:\image.jpg) , view it, and decides to upload or cancel.
i tried to set the source to the image path, but it didn't work since it is outside the webapplication project folder.
any help?

thx for your posts, but i ended up creating a temp folder on the server that stores the uploaded image using ajax. and when the user saves the data, the image is moved to another location, and the temp folder is deleted.

You can do something like this:
<img id="preview" src="" style="display:none;" />
<form>
....
<input type="file" id="file" />
....
</form>
<script type="text/javascript">
var file = document.getElementById("file");
var img = document.getElementById("preview");
file.onchange = function(){
img.src = file.value;
img.style.display = 'block';
};
</script>

There is no easy way, what You could do:
Preload image with some ajax file uploader to temp area and then let user decide
Use some third party written solution (f.ex. some flash component)
Here there is also similar question:
is it possible to preview local images before uploading them via a form?

You need server cooperation to access the image binary data. You won't be able to use the "Upload Form" to access the file info without uploading it to a server.
You could however do something like tell the user to paste the source binary data of the image in a textarea or something, then you can use JavaScript to load that binary data and display the actual image.

This is available in some browsers via the HTML5 file access API. Here is the Firefox documentation for file access.

As answered several times, you can't do this with plain HTML/JavaScript due to security restrictions. You need to send the image anyway. You can however handle this using a Java Applet since it runs entirely at the client machine and offers more control than HTML/JS. There are several free and ready-to-use ones. JumpLoader looks good and some major sites also uses it. With Flash it should also be possible, but I am not sure which ones offers this functionality. Check/tryout some Flash Multi File Uploaders.