What is Asset Hosting all about?
CodePen PRO accounts offer asset hosting. In other words, you can upload files directly to CodePen to use in the Pens that you build. For example, host an image file to use in a demo. Rather than the awkward steps of finding somewhere else to host those images for you, you can now just drag a file right onto CodePen to upload it, we’ll host it for you, and you can use it anywhere you like.
This makes working in CodePen even easier and even more fun!
In May 2020 we released a major upgrade to Asset Hosting! The blog post might be fun to look at to see little examples of all the things it can do.
Upload files right from the editor
It’s fast and easy. Just open the Assets panel, then drag and drop a file (or files) onto that area. They will upload and then slide down into the appropriate area based on their type. Click on them to get the URL to where they are hosted. You can use that as a
src for an image, as an external resource, or anywhere else you need to link up a file.
The Asset Manager
We give you full control and management of all your Assets on CodePen, via the Asset Manager. You can access the asset manager from your user menu, or go right to /assets/.
From inside the Asset Manager, you can:
- Upload Assets (drag and drop, or file select)
- Preview image assets
- Delete Assets
- Duplicate Assets
- Rename Assets
- Search/Sort/Filter Assets
- Download Assets
- See how much storage space you have left for uploading
What kind of files can I upload?
Are there any disallowed files?
All uploaded files must adhere to our Terms of Service. Nothing that would violate copyright in the way you are using it. Nothing offensive. We also ban
.exe files as they can be quite nefarious and there is no practical use of those on the web anyway.
Can the Assets be served over HTTPS?
Yep. Your hosted assets are HTTPS by default, and you should probably use them that way. You can always use an HTTPS asset on an HTTP page, it’s just the other way around that is bad news.
How much storage space do I have?
|Per File Limit||Total Storage|
|Free||None (upgrade!)||None (upgrade!)|
|Starter PRO||5 MB||2 GB|
|Developer PRO||10 MB||10 GB|
|Super PRO||15 MB||20 GB|
Can I upload multiple files at once?
Yep! Our file picker will accept multiple files drag-and-dropped onto it. In the Asset Panel in the editors, they files will just upload straight away. In the Asset Manager, you’ll see a file list first, allowing you to add more, remove some, or edit the files before uploading.
What happens if I run out of space?
You won’t be able to upload any more files. You can always delete some files to make room. Or if you are a Starter or Developer PRO, you can always upgrade tiers. Super PRO is the highest tier with the most storage space and largest allowed per-file sizes.
Is there a bandwidth limit?
What happens when I upload the same resource again?
If you upload a file that has the exact same name as a file that is already there, we’ll append a number to the end of the file name. For instance:
Even if you delete the original resource, we’ll continue to append numbers to the end of the file names. We know that might not always be ideal or seem weird, but we do it to combat browser caching. We serve these assets with expires headers set to the far future. If you were to re-upload and replace an asset, then refresh your Pen, you’ll still see the old asset because the browser has already downloaded it and was told to hang on to it. You personally can clear your own browser cache, but other people won’t know to do that, and your Pen might appear old or broken to them. The only way to combat that browser cache is to change the file name in the code itself to something the browser hasn’t seen before. We change the file name upon re-upload to encourage you to do that.
Can I edit files I’ve already uploaded?
You can! Any text-based file has a great editing experience that you can use. Here’s a video:
Image editing is coming soon.
I’m getting a CORS error
CORS is tricky stuff sometimes. The errors can be intermittent. Caching is involved. Browsers do things differently. Seemingly correct headers can not work as expected. But good news! We do everything we can to make sure your assets are set with wide-open permissive CORS headers.
- Your best bet is to make sure you’re using our new URL format, the one that starts with
- If you’re using the older
s3-us-west-amazonaws.com(or even older formats), we still try to set permissive CORS headers, but it’s tricky, so see #1.
Note that you may need to handle CORS directly in your code, with things like the
crossorigin attribute or