Drag and Drop File

luox-app · Jul 20, 2023 · c4680fe · c4680fe
1 parent 48cb0f3
commit c4680fe
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 9 deletions.
diff --git a/src/javascript/components/UploadForm.jsx b/src/javascript/components/UploadForm.jsx
@@ -224,6 +224,8 @@ const UploadForm = ({
  };
 
  useEffect(() => {
+ // const fileTypes = ["CSV", "SPDX"];
+ // const [file, setFile] = useState(null);
  if (csv.length > 0) {
  const sampleCount = csv[0].length - 1;
  if (absoluteOrRelative === "absolute") {
@@ -293,14 +295,20 @@ const UploadForm = ({
  </div>
 
  <div className="form-group">
- <input
- type="file"
- ref={fileInput}
- disabled={isLoaded}
- onChange={handleFileInput}
- className="form-control-file ml-100 mt-2"
- id="file-input"
- />
+ <div className="file-drop-area col-md-6 offset-md-3 col-xs-12">
+ <span className="choose-file-button">Choose files</span>
+ <span className="file-message">
+ or drag and drop files here
+ </span>
+ <input
+ type="file"
+ ref={fileInput}
+ disabled={isLoaded}
+ onChange={handleFileInput}
+ className="form-control-file ml-100 mt-2 file-input"
+ id="file-input"
+ />
+ </div>
  </div>
  </form>
  <ErrorTable errors={errors} />

diff --git a/src/stylesheets/custom.css b/src/stylesheets/custom.css
@@ -262,4 +262,53 @@
 
 .upload-main .portfolio .section-title {
  padding-bottom: 0px !important;
-}
+}
+
+.file-drop-area {
+ position: relative;
+ /* display: flex; */
+ align-items: center;
+ /* width: 450px; */
+ /* max-width: 100%; */
+ padding: 25px;
+ border: 1px dashed black;
+ border-radius: 3px;
+ transition: 0.2s;
+ margin-top: 20px !important;
+ margin-bottom: 20px !important;
+ }
+
+ .choose-file-button {
+ flex-shrink: 0;
+ background-color: rgba(255, 255, 255, 0.04);
+ border: 1px solid black;
+ border-radius: 3px;
+ padding: 8px 15px;
+ margin-right: 10px;
+ font-size: 12px;
+ text-transform: uppercase;
+ }
+
+ .file-message {
+ font-size: small;
+ font-weight: 300;
+ line-height: 1.4;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .file-input {
+ position: absolute;
+ left: 0;
+ top: 0;
+ height: 100%;
+ width: 100%;
+ cursor: pointer;
+ opacity: 0;
+
+ }
+
+ .mt-100{
+ margin-top:100px;
+ }