Add ability to upload binary assets (images, etc)

[ghost]

It would be great, if a feature available to add image files such as (SVG, PNG, JPEG), currently it won't allow this type of files to add in the project directory.

[EricSimons]

Totally — we're working on allowing upload of binary files, should land sometime later this month or in Sept :)

[jguix]

+1

[kylecordes]

Incidentally, some kinds of binary assets already arrive intact and are served correctly, when you create a StackBlitz from a GitHub repository.

[EricSimons]

@kylecordes good eye- we support all static assets for imported github repos right now. We're currently on track to ship static assets by mid-late April; I just posted in #72 (comment) with more info as well.

[kylecordes]

It is certainly an easy-ish workaround for anyone with an urgent need for asset serving. Grab your assets, put them in a GitHub repo. Fork that repo and continue all of your local code edits, no problem.

[MA-Maddin]

SVG is not binary, isn't it? But it is not allowed beeing created.

Anyway Material Angular has SVG files in their StackBlitz examples:
https://material.angular.io/components/icon/examples
https://stackblitz.com/angular/epvodnepjxy?file=app%2Ficon-svg-example.ts

but they cannot be loaded:
Console: Error retrieving icon: <svg> tag not found

😢

[EricSimons]

Will get SVG enabled for vendor assets. Thanks for letting us know about this! 🍻

[soorireddy]

+1

[miltonhowe]

This apparently remains outstanding despite bold and old predictions and stated intentions made in this thread and elsewhere.

You are able to drag and drop binary images (.png, .jpg) into a project and they appear in the tree. You are then however unable to save the project. The save fails silently (notwithstanding a cryptic message in the console).

There is no informatation about this limitation in the docs.
There is no messaging to the user when this (or any other) error prevents save from saving the project.

[rmjoia]

btw.. I just tried to upload a *.jpg and I get a message stating that I need to connect to github.. I'm using my github login, I'm signed on.. I don't see anywhere to "connect" ...

[kumaresan-subramani]

I have import my project from github [with image] but it does not load images

https://stackblitz.com/github/kumaresan-subramani/stackblitz-test

WHen can we get support to upload .png and .jpg files

[jyotiprasadpal]

I still can't find "assets" folder in angular project. I've issue now as I need to add some static files (mp3 music files as they can't stream from github or some other location) and without which my demo is not going to work. Please look into it.

[gspassky]

Guys, how can I make PWA when Stackblitz isn't supporting static files? Because of that I can't store service worker in my project (it's ignored after being uploaded to Firebase hosting)... Maybe there is a workaround?

[Nmuta]

What's the status of this in 2020 ? any word yet ? excited about the prospect of being able to include static assets like images in StackBlitz projects.

[waterplea]

I need to demo a web audio app and I need to fetch audio assets. I cannot do this cross domain due to CORS. I've created a github repo and dropped my assets to my Stackblitz, but it looks like they don't work, maybe served as document type or something like that. Any idea what I can do on my side?

[Hima-world]

how how put images? Im a beginner i really dont have the idea.
i did try to drag and drop but it says to have a pro account first. please help me

[philip-sultanescu]

Hi @EricSimons, I also have this problem, cannot show the images from the assets folder.

[EricSimons]

@philip-sultanescu currently we only support importing images as ESM import strings. Can you link your project here so I can take a look and send back a working example?

[philip-sultanescu]

@philip-sultanescu currently we only support importing images as ESM import strings. Can you link your project here so I can take a look and send back a working example?

@EricSimons Here you go, the github icon works when the project is compiled locally:
https://stackblitz.com/edit/github-logo-not-showing?file=src%2Fapp%2Fapp.module.ts

Another bug is that if you download the whole StackBlitz project, then the assets/github_logo.png file is corrupted.

However if you select only the png and click the Download "github_logo.png" button, then it gets shown in a new tab with this AWS presigned url, I expected it to download.

I have solved this problem in my own https://FileMaps.io file manager website - where I use presigned URLs to show images and I also add 2 extra headers to force the download on most browsers (as opposed to opening in a new tab).

This code is written in GO, but you can easily adapt it, as you can see I defined the attachment variable that I set to true whenever I want to download the image. If not then it will display.

// presign returns signed S3 URL with expiration time.
func presign(svc *s3.S3, bucket, key string, expiration time.Duration, attachment bool) (string, error) {
	input := s3.GetObjectInput{
		Bucket: aws.String(bucket),
		Key:    aws.String(key),
	}

	if attachment {
		input.ResponseContentDisposition = aws.String("attachment")
		input.ResponseContentType = aws.String("application/octet-stream")
	}

	req, _ := svc.GetObjectRequest(&input)
	// TODO: round the current time to the last half-hour and set the expiration to 1 hour,
	// so that it can be cached by CloudFront
	// https://advancedweb.hu/2018/11/15/s3_signed_urls_cloudfront/
	return req.Presign(expiration)
}

You will probably also need to add a CloudFront layer so your file urls have the same origin. I guess this is why they cannot be previewed in StackBlitz. If you want CloudFront to properly cache the images you will have to round the current time as I wrote in my TODO: comment.

[philip-sultanescu]

StackBlitz is now able to show images from the assets folder. Here is an example:
https://stackblitz.com/edit/github-logo-not-showing

[purplem1lk]

Thank you all for your patience - We are launching new core technology into beta next month that should resolve this issue so this will be closed accordingly. If this issue persists, feel free to tag me or ask to reopen this issue with screenshots of the error. Thank you! :)