I'm working on an ASP.NET MVC site where users are supposed to be able to upload images and PDF documents and view them at a later point. I noticed that certain filenames cause the attachments not to show.
I'm using Dropzone.js to provide a drag and drop field. The files are saved by a controller method using HttpPostedFileBase. When a user opens the gallery view, the respective controller method lists all previously uploaded files (filenames) in a ViewBag entry. The view then creates a thumbnail for each image:
foreach (var path in (IEnumerable<string>)ViewBag.Attachments){
...
<img class="attachments-thumbnail" style="cursor: pointer" src="#Url.Content(path)" alt="" />
...
}
Now when I upload an image with the filename h &.jpg, the thumbnail isn't shown. In Firefox, the console shows the error X GET http://localhost:54305/Content/Images/Attachments/1/h%20&.jpg. So it's looking for h%20&.jpg instead of h &.jpg, even though the file was saved to the server as intended as h &.jpg.
On the other hand, when I upload a pdf with the name radio%2E11%2E3%2E1852937.pdf, this again gets saved with its original filename, but this time the error appears the other way around: X GET XHR http://localhost:54305/Content/Images/Attachments/1/radio.11.3.1852937.pdf.
I'm not sure where this happens. When I use the inspector tool, the thumbnail <img> tag points to the correct filename, i.e. the one present on the server. I imagine this must be a very frequent use case, so is there any C# method that makes a filename safe for web use or will I have to rename the files myself? Ideally of course I'd like to keep at least the filenames of the pdfs the way the user chose them, as they may indicate file content, but it seems to be unsafe..
Related
i want to display pdf files in my website but unfortunately it will automatically download by idm.
here's my code:
$
<div class="viewerthesispdf">
<div id="viewer" class="pdf-viewer" data-url="<?php the_field('upload_pdfACField'); ?>"></div>
data-url is used to embed a file in a web page. That makes sense for images. It doesn't make sense for a PDF (or Excel or Word or most other file types) because normally these types of files are in place of a page, not a section of a web page. There are generally two solutions, depending on whether the files need to be restricted:
Use an href tag to reference the file. Download File1 I usually include target="_blank" in order to force a new page so that if there is a problem with the download you don't "lose" the original page, but it isn't strictly necessary. This will simply give a link to the file - and you can use a button, Font Awesome, images, etc. to make it fancier - but in the end "a link to a file".
Create a form which returns only the PDF as a result. Again I usually include target="_blank". The advantage of a form is that (a) the file doesn't have to actually exist on disk - it can be created by a script on-the-fly (technically this can be done with a link too - but typically a link would be a file rather than a script) and (b) you can include any necessary parameters for security, user-specific customization, etc. as part of the form. The form can use a GET or a POST depending on your preference.
Use href to show your pdf file list like this Filename , it will not start downloading automatically, only when user click on it, it will start download.
<img class='preview' src='preview.png'>
This is an input for image upload:
<input type='file' class='img-upload' accept='image/*'>
When I clicked on the preview image(<img class='preview' src='preview.png'>), I have to change the value of the file input (<input type='file' class='img-upload' accept='image/*'>). The value of the file input should be the preview image.
Short answer: you cannot.
Long answer: The problem is that the file inputs are very sandbox'ed and will not allow user scripts to change their value. The goal is to make sure the user needs to click and acknowledge that he is sending a file from his computer.
Now, the user cannot send the image he clicked on mostly because it is not on his computer (well, technically yes, but even then he would need to know where it is stored and choose it by manually going over the folder). Another thing is, why would you want him to send over a file that you have served him? You could simply get the name of the file or an ID of any sort and use that internally.
Let's take the example of an user avatar. The user gets the possibility to pick between 10 different "preset" pictures, or to upload his own. What you'd do is have 2 form fields, one for the uploaded picture and one for the chosen preset. On server side you would see if the user uploaded a picture, and use that one. If not, use the picture he chose from your server.
I hope I got your question right...
EDIT: If you really, really, really needed to upload the displayed picture, you could get the image data (with ajax I guess), store it into a Blob and send it for upload.
But that has some serious drawbacks. And I think you'll be limited by crossdomain policies so basically you'll only be able to access files that your server can access directly...
Even if you got all that covered, it would be a painfully slow process for the user while all that is required is just sending the name of the picture and the server does the rest.
input type="file" can only be set by the user. Not by a script (not HTML, nor javascript, ...).
Every exe on a windows pc has the capacity to access your files. Including renaming, deleting, encrypting, ... them. For example that's what Wannacry (randsomware) does.
(similar for Mac and Linux, I guess)
A webbrowser is an executable, thus has all those capacities. For security reasons most of these features are turned off, on purpose.
Long ago I wrote a program in C++ (or C#, not sure), with Visual Studio. VS has a webbrowser component. The purpose was to upload multiple albums of photos to a website, but the exe on my pc did have the capacity to use a script to set the input type="file".
So my program could read all subfolders, find all images, automatically upload them, and then the php server saved the albums/images.
In order to stop people like you and me from doing these kind of things, real webbrowsers disabled all these abilities.
I am trying to migrate images with a small chrome extension i have built. the extension consists of 5 files:
popup.html - the plugin html document
Has some html buttons
also has script link to my settings.js file that listens for the image downlaod button to be clicked and send a message to my content script : run.js to find the images
run.js - content script ( has access to the webpages DOM ).
This script recieves the message from run.js which then finds all the images names and image links i want to download. It puts them into an object and sends them via message to the backgorund script : bootstrap.js
bootstrap.js - runs the background page and has access to the chrome api.
var Downloads = [];
chrome.extension.onMessage.addListener(function(request, sender, sendResponse)
{
if(request.message.method == 'download'){
for( var d = 0; d <= request.message.imageLinks.length; d++ ){
chrome.downloads.download( {url: request.message.imageLinks[d],
filename: request.message.imageName[d]}, function(id){
});
sendResponse('done');
}
}
});
This all works fine and dandy. It loops through the images and downloads them.
What i need to be able to do now is: Take the images i just downloaded, and insert them into the file upload fields on the other website (which i have open in another tab) which have the same field names ect..
I see chrome has a
//Initiate dragging the downloaded file to another application. Call in a javascript ondragstart handler.
chrome.downloads.drag(integer downloadId)
At first i thought this might work since you can manually drag the downloaded image into the html file upload field without having to click and select the file. But i can't find any documentation / examples on it.
Does anyone know it is possible to get accomplish this with javascript / chrome api?
First you need to access the content of the files you downloaded.
For that, you need to add a permission to file://*in your manifest file.
Then you can loop through your downloaded files with chrome.downloads.search for instance and get each file's path in the system (DownloadItem.filename property). For each file, make a GET XMLHttpRequest to the url file://{filepath} to get the file's content.
Once you have that content, you can convert it to a DataUrl and programmatically add the file to the FormData of your form (not the actual inputs though, just the FormData submitted in the end). See this answer for this part.
Tried googling for a readily available script, but to no avail. I'm trying to find a script that does the below. Im not sure of there is a name for it.
Thank you in advance!
Function: Banner rotator with a single URL (PHP based)
Example:
User uploads 5 images (468x60px)
The system generates a a single image URL (e.g. http://demo.com/image.gif)
When user goes to the generated URL, it randomly shows 1 of his 5 images
Every time he refreshes the URL, it randomly shows him another one of his images
You can have the server-side code that processes the given URL return a random image each time. If you specify the server-side language (PHP, ASP.Net, JSP, ...) that you are using, I can give an example.
The URL can be something like
http://demo.com/image/
It does not need to have a specific image name in it.
The key is to ensure that the browser does not try and cache that URL. Set appropriate cache headers when returning the image. Again, the mechanics of doing that are specific to your language.
PHP Example
This short tutorial shows you now to select a random image from a folder of images
http://www.heckdesigns.com/tutorials/tutorial-pull-in-a-random-image-from-a-folder-with-php/
URL
You really should not have to require your URL to end in .png or whatever. If you set the Content-Type appropriately (as the tutorial above does), any web browser should display it properly. If that is in fact a requirement, you can use Apache rewrite rules to do that.
See
mod_rewrite and image redirecting
I know this has been asked plenty of times, but this is a special case. I'm working on an online HTML editor, using the design function of HTML 5 browsers (yeah, I found a useful application for this feature). I want to let the developer load a page, but developers are lazy (so am I), so I don't want them to enter the full path to their page. To prevent this, I use a file input (id="temp") WHICH DOESN'T GO TO THE SERVER!!!
I tried to open the local HTML file in a new browser in several ways, but the relative links in the page don't work:
window.open(temp.files.item(0)?temp.files.item(0).getAsDataURL():'',title.value,'width='+screen.width+',height='+screen.height)
The URL is encoded. This way the links in the file don't work, like in a ZIP file.
last = window.open('',title.value,'width='+screen.width+',height='+screen.height)
if(temp.files.item(0))
last.document.body.innerHTML = temp.files.item(0).getAsText("utf-8")
This code opens a blank page and copies the HTML code to the blank page. Of course the links in this page don't work either. temp.value only shows the filename, not the path.
Browsers simply will not tell you the information you want. The "value" property of "file" input elements does not contain the path.
If "the page" is really just an HTML page, then you might want to look into the HTML5 file reader stuff and see if you could at least read the file contents and dump them into a new browser window/tab. There might still be problems with HTML documents that expect to be able to locate auxiliary files (CSS, images, etc) via relative paths.