file upload

Question

file upload

Closed this issue 3 months ago · 8 comments

from flask import Flask, render_template, request
from flask_uploads import UploadSet, configure_uploads, ALL

app = Flask(__name__)

# Configure the upload set and the upload folder
uploads = UploadSet("uploads", ALL)
app.config["UPLOADED_FILES_DEST"] = "uploads"
configure_uploads(app, uploads)

@app.route("/", methods=["GET", "POST"])
def upload_file():
    if request.method == "POST" and "file" in request.files:
        uploaded_file = request.files["file"]
        uploaded_file.save(f"uploads/{uploaded_file.filename}")
        return "File uploaded successfully!"

    return render_template("upload.html")

if __name__ == "__main__":
    app.run(debug=True)

Answer 1 · 2023-11-23T04:50:39.000Z

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload</title>
</head>
<body>
  <h1>File Upload</h1>
  <form action="/" method="post" enctype="multipart/form-data">
    <input type="file" name="file" multiple>
    <button type="submit">Upload</button>
  </form>
</body>
</html>

Answer 2 · 2023-11-23T05:29:56.000Z

import requests

headers = {
    'Content-Type': 'application/octet-stream',
}

with open('/path/to/your/file.txt', 'rb') as f:
    data = f.read()

response = requests.post('http://localhost:5000/upload', headers=headers, data=data)

Answer 3 · 2023-11-23T05:30:09.000Z

from flask import Flask, request

app = Flask(__name__)

@app.route('/upload', methods=['POST'])
def upload_data():
    # Get the file content from the request data
    file_content = request.data

    # Process the file content as needed
    # ...

    # Return a response, if needed
    return "File uploaded successfully!"

if __name__ == '__main__':
    app.run(debug=True)

Answer 4 · 2023-11-23T08:10:20.000Z

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
    <h2>Upload a File</h2>
    <form id="uploadForm" enctype="multipart/form-data">
        <label for="file">Choose a file:</label>
        <input type="file" name="file" id="file" accept=".txt, .pdf, .doc, .docx"> <!-- specify accepted file types if needed -->
        <br>
        <input type="button" value="Upload" onclick="uploadFile()">
    </form>

    <script>
        function uploadFile() {
            // Get the selected file
            var fileInput = document.getElementById('file');
            var file = fileInput.files[0];

            if (file) {
                // Read the file content
                var reader = new FileReader();
                reader.onload = function(e) {
                    var fileContent = e.target.result;

                    // Create a hidden input field to store the file content
                    var hiddenInput = document.createElement('input');
                    hiddenInput.type = 'hidden';
                    hiddenInput.name = 'fileContent';
                    hiddenInput.value = fileContent;

                    // Append the hidden input to the form
                    var form = document.getElementById('uploadForm');
                    form.appendChild(hiddenInput);

                    // Submit the form
                    form.submit();
                };

                reader.readAsText(file); // You may need to adjust this based on your use case
            }
        }
    </script>
</body>
</html>

Answer 5 · 2023-11-23T08:40:52.000Z

// file-upload.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class FileUploadService {
  constructor(private http: HttpClient) {}

  uploadFile(file: File) {
    const formData: FormData = new FormData();
    formData.append('file', file, file.name);

    return this.http.post('/api/upload', formData);
  }
}

Answer 6 · 2023-11-23T08:41:12.000Z

// file-upload.component.ts

import { Component } from '@angular/core';
import { FileUploadService } from './file-upload.service';

@Component({
  selector: 'app-file-upload',
  template: `
    <input type="file" (change)="onFileChange($event)" />
    <button (click)="uploadFile()">Upload</button>
  `
})
export class FileUploadComponent {
  selectedFile: File | null = null;

  constructor(private fileUploadService: FileUploadService) {}

  onFileChange(event: any) {
    this.selectedFile = event.target.files[0];
  }

  uploadFile() {
    if (this.selectedFile) {
      this.fileUploadService.uploadFile(this.selectedFile).subscribe(
        response => {
          console.log('File uploaded successfully', response);
        },
        error => {
          console.error('Error uploading file', error);
        }
      );
    }
  }
}

Answer 7 · 2023-11-23T08:48:08.000Z

// file-upload.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class FileUploadService {
  constructor(private http: HttpClient) {}

  uploadFile(file: File) {
    const formData: FormData = new FormData();
    formData.append('file', file, file.name);

    const headers = new HttpHeaders({
      'Content-Type': 'application/octet-stream'
    });

    return this.http.post('/api/upload', formData, { headers, responseType: 'text' });
  }
}

Answer 8 · 2023-11-24T01:31:09.000Z

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];

var reader = new FileReader();

reader.onload = function(event) {
  var fileContent = event.target.result;

  fetch('your-upload-url', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/octet-stream', // Adjust the Content-Type as needed
    },
    body: fileContent,
  })
  .then(response => response.json())
  .then(data => console.log('Success:', data))
  .catch(error => console.error('Error:', error));
};

reader.readAsArrayBuffer(file);