uploaded filenames not being slugified

[thauvette]

- Do you want to request a feature or report a bug?
Bug
- What is the current behavior?
If I upload an image with a space in the filename, let's say "my picture.jpg" the following happens.

I get a 404 error in the console saying can't find " https://raw.githubusercontent.com/myusername/reponame/branch/path/to/my/uploads/my%20picture.jpg".
I can still "Choose Selected" on the un-previewable thumbnail and the image shows in the CMS preview with the file name "my picture.jpg". If I publish the post the image is saved as "/path/to/my/uploads/my picture.jpg" and not "/path/to/my/uploads/my%20picture.jpg". This, of course, doesn't work well with Gatsby.

- If the current behavior is a bug, please provide the steps to reproduce.

- What is the expected behavior?

I think the files should save as "my%20picture.jpg" not "my picture.jpg"

- Please mention your CMS, node.js, and operating system version.

CMS - netlify-cms@1.3.5
node v8.9.4

- Please link or paste your config.yml below if applicable.

backend:
  name: git-gateway
  branch: development

media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images/uploads"

collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "src/pages/blog/posts" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Author - type to select", name: "author", widget: "relation", collection: "authors", searchFields: ["title", "firstName", "lastName"], valueField: "title"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image - filename must have NO spaces", name: "thumbnail", widget: "image"}
      - {label: "Body", name: "body", widget: "markdown"}
  - name: "authors"
    label: "Authors"
    folder: "src/authors"
    create: true
    slug: "{{slug}}"
    fields: 
      - {label: "Layout", name: "layout", widget: "hidden", default: "author"}
      - {label: "Full Name", name: "title", widget: "string"}
      - {label: "First Name", name: "firstName", widget: "string"}
      - {label: "Last Name", name: "lastName", widget: "string"}
      - {label: "Position", name: "position", widget: "string"}
      - {label: "Profile Picture - filename must have NO spaces", name: "profilePicture", widget: "image"}
      - {label: "Email", name: "email", widget: "string"}
  - name: "investors"
    label: "Investors"
    folder: "src/investors"
    create: true
    slug: "{{slug}}"
    fields: 
      - {label: "Layout", name: "layout", widget: "hidden", default: "investor"}
      - {label: "Full Name", name: "title", widget: "string"}
      - {label: "First Name", name: "firstName", widget: "string"}
      - {label: "Last Name", name: "lastName", widget: "string"}
      - {label: "Bio", name: "bio", widget: "markdown" }
      - {label: "Picture - filename must have NO spaces", name: "picture", widget: "image", required: false}

[tech4him1]

@thauvette Are you using a private GitHub repo?

If so, does the image preview show up if you reload the CMS?

If both are true, this will be fixed in #994.
(%20 is just the URL-encoded version of the space, so it shouldn't affect the request.)

[thauvette]

@tech4him1 yes to both.

[tech4him1]

@thauvette Thanks. I'm thinking the preview breaking happens to images without a space as well, can you confirm?

[thauvette]

@tech4him1 yes it does.

[tech4him1]

On the Gatsby issue, what does the image name show up as in the GitHub? Does it show with the %20 or a space? IMO, It would be really weird if it was saving it with the %20, or if Gatsby was expecting it. 😕

[thauvette]

In Gatsby it's spaces as well. If it's a preview image or thumbnail, anything inside the frontmatter I'm using encodeURI() to help but I'm not sure how to do that if it's in the html portion of query. It would be better if I could get the CMS to remove change the space to %20.

[tech4him1]

I guess I don't understand why it needs to be URL-encoded in the frontmatter, instead of on-the-fly like would normally be done. Have you tried it without encodeURI()?

[tech4him1]

#1135 will convert spaces to dashes in media by default. I think that's your preference here, anyway?

[thauvette]

@tech4him1 I'm using encodeURI() because it's not being done on the fly. My query in Gatsby returns a string with spaces, and the file is saved in my repo with spaces. My understanding (and I may be misinformed) is that the file name should be saved with %20.

If I understand #1135 I need to use slug_type. Where in the config does that go? I tried...

media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images/uploads"
slug_type: iri 

with no success.

[tech4him1]

My understanding (and I may be misinformed) is that the file name should be saved with %20.

I definitely won't claim to be an expert here, but I've never heard of it working like that. Gatsby and/or your browser should do that transparently.

My query in Gatsby returns a string with spaces, and the file is saved in my repo with spaces.

Again, I'm no Gatsby expert, but that sounds completely correct to me (without encodeURI). Have you tried it? If you have a repro of it not working, that sounds more like a Gatsby issue to me, since it should be able to handle files with spaces transparently, but I'd be glad to test.

If I understand #1135 I need to use slug_type.

#1135 hasn't been merged/released yet, but as soon as it is, it should sanitize/slugify automatically without any extra setting (it was kind-of a "side effect" of the PR 😄).

[thauvette]

Thanks @tech4him1, I'll investigate it as a Gatsby issue and report back here if I figure it out.

[thauvette]

@tech4him1 I recreated this issue using the Gatsby Netlify CMS starter. If you upload a file (picture) with a space in the filename the same errors occur.

No thumbnail and 404 console error...

The image appears in the preview...

But not the post...

Here's the site.

And Repo

It may just be the way it is until #1135 is merged?

[tech4him1]

Thanks for the repro! Looks like the difference between how we can render images with spaces in the name and Gatsby fails to is due to the difference in Markdown specs. 🙄

According to the original Markdown syntax document:

Inline image syntax looks like this:

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

That is:

• An exclamation mark: !;
• followed by a set of square brackets, containing the alt attribute text for the image;
• followed by a set of parentheses, containing the URL or path to the image, and an optional title attribute enclosed in double or single quotes.

~ https://daringfireball.net/projects/markdown/syntax/#img

This doesn't specify whether image URLs can include spaces or not.

CommonMark, however, excludes spaces from URLs:

A link destination consists of ... a nonempty sequence of characters that does not include ASCII space or control characters ...
~ http://spec.commonmark.org/0.28/#link-destination

The space must be converted to %20 before it is saved in the markdown body.

Like you said, I think the best way for us to fix this is just strip spaces out, which we will do as part of #1135.

[erquhart]

Fixed in #1135.