Image Uploader

An open source, self hosted image uploader
Explore the docs »

Dockerhub Frontend · Dockerhub Backend · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Hosting it with Docker
   • Setting it up
   • Run the docker file
   • Changing the URL
   • Hosting with Node
   • Run the docker file
   • Changing the URL
3. Roadmap
4. Contributing
5. License
6. Contact

About The Project

There are already a few image uploader out there in the internet, however, I didn't find any uploader which is fully open source, lightweight and made for self hosting. So I created one myself and hope you enjoy it.

You may also suggest changes by forking this repo and creating a pull request or opening an issue. Thanks to all the people have have contributed to expanding this project!

Built With

Here a list of the major frameworks I used for this project.

• React
• Express
• Material-UI

Getting Started

There are two ways on how to host this project. You can either use docker or host it with node. I would highly suggest hosting it with docker since it's more flexible.

Hosting it with Docker

Setting it up

In order to host the project you will need to create a docker-compose file. These files are combining multiple docker images to interact with each other.

The file needs to be called docker-compose.yml paste the following code in the file.

Insert in docker-compose.yml:

version: "3.8"
services:
    frontend:
        image: vallezw/image-uploader-client
        ports:
            - "80:80"
        environment:
            - "API_URL=http://localhost:5000"
            - "CLIENT_URL=http://localhost"
        
    backend:
        image: vallezw/image-uploader-backend 
        ports:
            - "5000:5000"
        volumes:
            - .upload/:/usr/src/app/upload

Run the docker file

Once you finished setting up the file you can go ahead and run it with

1. Building

   docker-compose build

2. Hosting the project

   docker-compose up

Changing the URL

In case you want to host the project without Docker you can do that too.

...
environment:
    - "API_URL=http://your_api_url:your_port"
    - "CLIENT_URL=http://your_client_url:your_port"

After that you are good to go and host it on your custom domain

Hosting with Node

Running the project

This is the option for those who don't want to host it with docker.

1. Go into the backend directory with a terminal/powershell

   cd backend/

2. Install the npm serve package to host the project

   npm install -g serve

3. Build and run it

   npm run build

Changing the URL

In case you want to change the URL you have to change the env variables.

1. Go into the frontend directory and open the .env file
2. Change the API_URL and the CLIENT_URL to your specific usecase

    API_URL=http://your_api_url:your_port
    CLIENT_URL=http://your_client_url:your_port

After that you are good to go and host it on your custom domain

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Valentin Zwerschke - @vallezw

Project Link: github.com/vallezw/Image-Uploader