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
Here's a quick 3 minute video on how that works.
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 get there from the user dropdown:
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
Here's a video introducing and demonstrating the Asset Manager:
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.
Are there any browsers Asset uploading doesn't work in?
Unfortunately IE 9. The rest of CodePen supports IE 9 OK (although we highly suggest IE 10). We would have had to engineer a totally different system for IE 9 and even then the experience wouldn't have been as nice. So for this feature, for now, we're saying IE 10 only plus our regular supported browser list.
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.