Display images with spaces in the file name (php)

Question

I'm going through the images I have in the img folder, and all of the images show up fine except for the ones that have spacing in their names e.g. "Screen shot.png". The user can upload photos, and their files may have spaces in the file name. Should I just remove all spaces before I save the images into my img folder? Or is there a way to still display the images with spacing in the image filepath?

function displayImage($row) {
                    $file_path = "img/" . $row['File_name'];
                    $image_title = $row['Title'];
                    echo "<br>" . $file_path;
                    echo "<li><img src=$file_path alt=$image_title>";
                    echo "<span class='info'><span>$image_title</span></span></li>";
                }

is the `src` value getting quoted? What does the rendered HTML look like? — ficuscr, Mar 23 '17 at 21:59

score 3 · Accepted Answer · answered Mar 23 '17 at 22:05

3

Use rawurlencode()...

function displayImage($row) {
    $file_path = "img/" . rawurlencode($row['File_name']);
    $image_title = $row['Title'];
    echo "<br>" . $file_path;
    echo "<li><img src=$file_path alt=$image_title>";
    echo "<span class='info'><span>$image_title</span></span></li>";
}

answered Mar 23 '17 at 22:05

Simon K

1,503
1
8
10

1

my OCD says "And quote it too!" – ficuscr Mar 23 '17 at 22:07

manian · Answer 2 · 2017-03-23T22:08:11.780

1

You should always rename the file with some unique file names. For example, you can append timestamp to the file name. By this way you can generate new file names without spaces. You can save the original file name for display purpose. But do not save the file to the server with original name of the file. It's because it is possible that the users could upload 2 images with same name which will replace the old file.

edited Mar 23 '17 at 22:08

answered Mar 23 '17 at 22:03

manian

1,418
2
16
32

Very good point. I didn't even think to point that out. Provides a good opportunity to creates some UID for the files. Could track original file names and whatever other meta data in database if it were needed. – ficuscr Mar 23 '17 at 22:05
Ok. Can you please accept one of the answers which you think solved your issue – manian Mar 23 '17 at 22:37

score 1 · Answer 3 · edited May 23 '17 at 10:30

You want to use rawurlencode* your file name (not the file path simply the name element thereof; Such as:

 $file_path = "img/" . urlencode($row['File_name']);

*> Use rawurlencode because it will encode spaces as %20 rather than + which urlencode will do. It also more closely fits the RFC.

But it is not a good idea to use these non url safe values and it would be better to rename the file on upload such as with:

$newFilename = preg_replace("/\h*/","_",$uploadedFile['name']);

\h catches any horizontal whitespace character
* catches it zero or more times (greedy)
These are then replaced with an underscore _

score 0 · Answer 4 · answered Mar 23 '17 at 22:01

Does this work? Like I commented... Looks like you are just not quoting the path / src value.

function displayImage($row) {
                    $file_path = "img/" . $row['File_name'];
                    $image_title = $row['Title'];
                    echo "<br>" . $file_path;
                    echo "<li><img src=\"{$file_path}\" alt=\"{$image_title}\">";
                    echo "<span class='info'><span>$image_title</span></span></li>";
                }

score 0 · Answer 5 · edited Mar 23 '17 at 22:12

0

Just replace spaces by their url_encoded value : %20.

In your case, replace the first line of your function by:

 $file_path = "img/" . str_replace(" ", '%20', $row['File_name']);

edited Mar 23 '17 at 22:12

Martin

22,212
11
70
132

answered Mar 23 '17 at 22:06

Bar-code

277
1
6

Display images with spaces in the file name (php)

5 Answers5