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
Related
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.
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.
I'm working on an HTML/javascript app intended to be run locally.
When dealing with img tags, it is possible to set the src attribute to a file name with a relative path and thereby quickly and easily load an image from the app's directory. I would like to use a similar method to retrieve a text file from the app's directory.
I have used TideSDK, but it is less lightweight. And I am aware of HTTP requests, but if I remember correctly only Firefox has taken kindly to my use of this for local file access (although accessing local images with src does not appear to be an issue). I am also aware of the FileReader object; however, my interface requires that I load a file based on the file name and not based on a file-browser selection as with <input type="file">.
Is there some way of accomplishing this type of file access, or am I stuck with the methods mentioned above?
The browser will not permit you to access files like that but you can make javascript files instead of text files like this:
text1.js:
document.write('This is the text I want to show in here.'); //this is the content of the javascript file
Now call it anywhere you like:
<script type="text/javascript" src="text1.js"></script>
There are too many security issues (restrictions) within browsers making many local web-apps impossible to implement so my solution to a similar problem was to move out of browsers and into node-webkit which combines Chromium + Node.js + your scripts, into an executable with full disk I/O.
http://nwjs.io/
[edit] I'm sorry I thought you wanted to do this with TideSDK, I'll let my answer in case you want to give another try to TideSDK [/edit]
I'm not sure if it's what you're looking for but I will try to explain my case.
I've an application which allow the user to save the state of his progress. To do this, I allow him to select a folder, enter a filename and write this file. When the user open the app, he can open the saved file, and get back his progress. So I assume this enhancement is similar of what you are looking for.
In my case, I use the native File Select to allow the user to select a specific save (I'm using CoffeeScript) :
Ti.UI.currentWindow.openFileChooserDialog(_fileSelected, {
title: 'Select a file'
path: Ti.Filesystem.getDocumentsDirectory().nativePath()
multiple: false
})
(related doc http://tidesdk.multipart.net/docs/user-dev/generated/#!/api/Ti.UI.UserWindow-method-openFileChooserDialog)
When this step is done I will open the selected file :
if !filePath?
fileToLoad = Ti.Filesystem.getFile(scope.fileSelected.nativePath())
else
fileToLoad = Ti.Filesystem.getFile(filePath)
data = Ti.JSON.parse(fileToLoad.read())
(related doc http://tidesdk.multipart.net/docs/user-dev/generated/#!/api/Ti.Filesystem)
Please note that those snippets are copy/paste from my project and they will not work without the rest of my code but I think it's enough to illustrate you how I manage to open a file, and read his content.
In this case I'm using Ti.JSON.parse because there is only javascript object in these files but in your case you can just get the content. The openFileChooserDialog isn't mandatory, if you already know the file name, or if you get it from another way you can use Ti.Filesystem in your own way.
I made some png using canvas.toDataURL().
I want to save it to folder that have some png using download dialog.
But I don't know how to make folder and to use download dialog.
Please advise me.
Pretty sure there's no way to create an arbitrary folder on your client's computer. It seems to me like that would be a massive security problem.
If you want to create a link to download a file, just use the download attribute on your a tag.
<a href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4
c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABoSU
RBVDhPvYxLFoAwCAN7/0sjJRFCW135nIWSX4d1xgaDm6b32FlMinjr0Aaa1
gDHE21QIsAN1MFR2pniw4ED2Rrv/D+g3sh0fvMCUWgw0EEKEDVCSwo10HhB
01bSABwc/gWUAK3E7AJgQR/9VKyAfgAAAABJRU5ErkJggg=="
download="myimage.png">Download this image</a>.
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?