What is Asset Hosting all about?
Assets is just another name for files. Any type of file.
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. It will upload and you can use it right away.
This makes working in CodePen even easier and even more fun!
Upload files right from the editor
It's fast and easy. Just open the Assets area and 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 visit https://codepen.io/you/assets/
From inside the Asset Manager, you can:
- Upload Assets (drag and drop, or file select)
- Preview image assets, including their dimensions
- See who uploaded what (useful for Teams)
- Delete Assets
- Duplicate Assets
- Rename Assets
- Search for Assets
- Download Assets
- See how much 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.
How much space do I have?
1GB for PRO users. 5GB for Super PRO users.
What is the maximum file size for a hosted file?
How many files can I upload at a time?
Ten. This is just to prevent accidents where you accidentally select too many files and they all start uploading before you can stop it.
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 though. Or if you are a regular PRO user, upgrade to Super PRO.
I'm getting an error while uploading a file.
It might be:
- The file has no file extension (like "file", or a folder)
- The file as a file extension that we don't allow, like .exe
- The file is empty (0k)
- The file is over our limit of 2MB
- You are uploading more than 10 files at once
- Something strange is happening and you should contact us
Is there a bandwidth limit?
Can I use these hosted files for other stuff?
We're going to make these assets only link-able through *codepen.io domains. We're doing this because it is more fair. We don't want to enforce or for you to have to think about a bandwidth limit. Say someone forks your Pen and does some totally different stuff to it, but leaves your asset in place, and then that Pen gets wildly popular. Great! No penalty to you.
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.
I'm getting a CORS error
CORS is the hardest problem in computer science. The errors are often intermittent. Caching is involved. Browsers do things differently. Seemingly correct headers can not work as expected.
Rest assured we do set wide open CORS headers on your CodePen-hosted assets, which as far as we know, is the best we can do.
Note that you may need to handle CORS directly in your code, with things like the
crossorigin attribute or
Here's another problem we've seen: it seems like if you visit the URL for an asset directly in the browser, for the first time, like in a new tab, it can cache some weird headers and break CORS. A possible solution here is making sure you request the asset in your code as the first time it's being accessed. If it's already too late, rename the asset.