Feature :- Upload files by URL completed

client/constants.js

@@ -51,6 +51,7 @@ export const SHOW_MODAL = 'SHOW_MODAL';
 export const HIDE_MODAL = 'HIDE_MODAL';
 export const CREATE_FILE = 'CREATE_FILE';
 export const SET_BLOB_URL = 'SET_BLOB_URL';
+export const UPLOAD_FILE_BY_URL = 'UPLOAD_FILE_BY_URL';
 
 export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
@@ -84,6 +85,9 @@ export const SHOW_FOLDER_CHILDREN = 'SHOW_FOLDER_CHILDREN';
 export const HIDE_FOLDER_CHILDREN = 'HIDE_FOLDER_CHILDREN';
 export const OPEN_UPLOAD_FILE_MODAL = 'OPEN_UPLOAD_FILE_MODAL';
 export const CLOSE_UPLOAD_FILE_MODAL = 'CLOSE_UPLOAD_FILE_MODAL';
+// Updates
+export const OPEN_UPLOAD_FILE_BY_URL_MODAL = 'OPEN_UPLOAD_FILE_BY_URL_MODAL';
+export const CLOSE_UPLOAD_FILE_BY_URL_MODAL = 'CLOSE_UPLOAD_FILE_BY_URL_MODAL';
 
 export const SHOW_SHARE_MODAL = 'SHOW_SHARE_MODAL';
 export const CLOSE_SHARE_MODAL = 'CLOSE_SHARE_MODAL';

client/modules/IDE/actions/files.js

@@ -3,8 +3,10 @@ import blobUtil from 'blob-util';
 import { reset } from 'redux-form';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { setUnsavedChanges, closeNewFolderModal, closeNewFileModal } from './ide';
+import { setUnsavedChanges, closeNewFolderModal, closeNewFileModal, closeUploadFileByURLModal } from './ide';
 import { setProjectSavedTime } from './project';
+import { CREATE_FILE_REGEX } from '../../../../server/utils/fileUtils';
+import { showToast, setToastText } from './toast';
 
 
 function appendToFilename(filename, string) {
@@ -92,6 +94,39 @@ export function createFile(formProps) {
   };
 }
 
+export function uploadFileByURL(data) {
+  return (dispatch, getState) => {
+    const fileUrlArray = data.url.split('/');
+    const fileName = fileUrlArray[fileUrlArray.length - 1];
+    const file = {
+      name: fileName
+    };
+    if (fileName.match(CREATE_FILE_REGEX)) {
+      fetch(data.url, {
+        method: 'GET'
+      })
+        .then(r => r.text())
+        .then((res) => {
+          file.content = res;
+          createFile(file)(dispatch, getState);
+          dispatch(showToast(2000));
+          dispatch(setToastText('UploadFileByURL.Success'));
+          dispatch(closeUploadFileByURLModal());
+        })
+        .catch((err) => {
+          dispatch(showToast(2000));
+          dispatch(setToastText('UploadFileByURL.Error'));
+        });
+    } else {
+      file.url = data.url;
+      createFile(file)(dispatch, getState);
+      dispatch(showToast(2000));
+      dispatch(setToastText('UploadFileByURL.Success'));
+      dispatch(closeUploadFileByURLModal());
+    }
+  };
+}
+
 export function createFolder(formProps) {
   return (dispatch, getState) => {
     const state = getState();

client/modules/IDE/actions/ide.js

@@ -88,6 +88,20 @@ export function closeUploadFileModal() {
   };
 }
 
+export function openUploadFileByURLModal(parentId) {
+  return {
+    type: ActionTypes.OPEN_UPLOAD_FILE_BY_URL_MODAL,
+    parentId
+  };
+}
+
+export function closeUploadFileByURLModal() {
+  return {
+    type: ActionTypes.CLOSE_UPLOAD_FILE_BY_URL_MODAL
+  };
+}
+
+
 export function expandSidebar() {
   return {
     type: ActionTypes.EXPAND_SIDEBAR

client/modules/IDE/components/FileNode.jsx

@@ -153,6 +153,11 @@ class FileNode extends React.Component {
     setTimeout(this.hideFileOptions, 0);
   }
 
+  handleClickUploadFileByURL = () => {
+    this.props.openUploadFileByURLModal(this.props.id);
+    setTimeout(this.hideFileOptions, 0);
+  }
+
   handleClickDelete = () => {
     const prompt = this.props.t('Common.DeleteConfirmation', { name: this.props.name });
 
@@ -248,12 +253,12 @@ class FileNode extends React.Component {
         { !isRoot &&
           <div className="file-item__content" onContextMenu={this.toggleFileOptions}>
             <span className="file-item__spacer"></span>
-            { isFile &&
+            {isFile &&
               <span className="sidebar__file-item-icon">
                 <FileIcon focusable="false" aria-hidden="true" />
               </span>
             }
-            { isFolder &&
+            {isFolder &&
               <div className="sidebar__file-item--folder">
                 <button
                   className="sidebar__file-item-closed"
@@ -303,7 +308,7 @@ class FileNode extends React.Component {
             </button>
             <div className="sidebar__file-item-options">
               <ul title="file options">
-                { isFolder &&
+                {isFolder &&
                   <React.Fragment>
                     <li>
                       <button
@@ -327,17 +332,29 @@ class FileNode extends React.Component {
                         {t('FileNode.AddFile')}
                       </button>
                     </li>
-                    { this.props.authenticated &&
-                      <li>
-                        <button
-                          aria-label={t('FileNode.UploadFileARIA')}
-                          onClick={this.handleClickUploadFile}
-                          onBlur={this.onBlurComponent}
-                          onFocus={this.onFocusComponent}
-                        >
-                          {t('FileNode.UploadFile')}
-                        </button>
-                      </li>
+                    {this.props.authenticated &&
+                      <React.Fragment>
+                        <li>
+                          <button
+                            aria-label={t('FileNode.UploadFileARIA')}
+                            onClick={this.handleClickUploadFile}
+                            onBlur={this.onBlurComponent}
+                            onFocus={this.onFocusComponent}
+                          >
+                            {t('FileNode.UploadFile')}
+                          </button>
+                        </li>
+                        <li>
+                          <button
+                            aria-label={t('FileNode.UploadFileByURLARIA')}
+                            onClick={this.handleClickUploadFileByURL}
+                            onBlur={this.onBlurComponent}
+                            onFocus={this.onFocusComponent}
+                          >
+                            {t('FileNode.UploadFileByURL')}
+                          </button>
+                        </li>
+                      </React.Fragment>
                     }
                   </React.Fragment>
                 }
@@ -393,6 +410,7 @@ FileNode.propTypes = {
   hideFolderChildren: PropTypes.func.isRequired,
   canEdit: PropTypes.bool.isRequired,
   openUploadFileModal: PropTypes.func.isRequired,
+  openUploadFileByURLModal: PropTypes.func.isRequired,
   authenticated: PropTypes.bool.isRequired,
   t: PropTypes.func.isRequired,
   onClickFile: PropTypes.func

client/modules/IDE/components/Sidebar.jsx

@@ -2,9 +2,11 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { withTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 
 import ConnectedFileNode from './FileNode';
-
+import { openUploadFileByURLModal } from '../actions/ide';
 import DownArrowIcon from '../../../images/down-filled-triangle.svg';
 
 class Sidebar extends React.Component {
@@ -116,19 +118,34 @@ class Sidebar extends React.Component {
               </li>
               {
                 this.props.user.authenticated &&
-                <li>
-                  <button
-                    aria-label={this.props.t('Sidebar.UploadFileARIA')}
-                    onClick={() => {
-                      this.props.openUploadFileModal(rootFile.id);
-                      setTimeout(this.props.closeProjectOptions, 0);
-                    }}
-                    onBlur={this.onBlurComponent}
-                    onFocus={this.onFocusComponent}
-                  >
-                    {this.props.t('Sidebar.UploadFile')}
-                  </button>
-                </li>
+                <React.Fragment>
+                  <li>
+                    <button
+                      aria-label={this.props.t('Sidebar.UploadFileARIA')}
+                      onClick={() => {
+                        this.props.openUploadFileModal(rootFile.id);
+                        setTimeout(this.props.closeProjectOptions, 0);
+                      }}
+                      onBlur={this.onBlurComponent}
+                      onFocus={this.onFocusComponent}
+                    >
+                      {this.props.t('Sidebar.UploadFile')}
+                    </button>
+                  </li>
+                  <li>
+                    <button
+                      aria-label={this.props.t('Sidebar.UploadFileByURLARIA')}
+                      onClick={() => {
+                        this.props.openUploadFileByURLModal(rootFile.id);
+                        setTimeout(this.props.closeProjectOptions, 0);
+                      }}
+                      onBlur={this.onBlurComponent}
+                      onFocus={this.onFocusComponent}
+                    >
+                      {this.props.t('Sidebar.UploadFileByURL')}
+                    </button>
+                  </li>
+                </React.Fragment>
               }
             </ul>
           </div>
@@ -155,6 +172,8 @@ Sidebar.propTypes = {
   closeProjectOptions: PropTypes.func.isRequired,
   newFolder: PropTypes.func.isRequired,
   openUploadFileModal: PropTypes.func.isRequired,
+  // Updates
+  openUploadFileByURLModal: PropTypes.func.isRequired,
   owner: PropTypes.shape({
     id: PropTypes.string
   }),
@@ -169,4 +188,12 @@ Sidebar.defaultProps = {
   owner: undefined
 };
 
-export default withTranslation()(Sidebar);
+function mapStateToProps(state) {
+  return {};
+}
+
+function mapDispatchToProps(dispatch) {
+  return bindActionCreators({ openUploadFileByURLModal }, dispatch);
+}
+
+export default withTranslation()(connect(mapStateToProps, mapDispatchToProps)(Sidebar));

client/modules/IDE/components/UploadFileByURLForm.jsx

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { withTranslation } from 'react-i18next';
+import { domOnlyProps } from '../../../utils/reduxFormUtils';
+
+
+import Button from '../../../common/Button';
+
+class UploadFileByURLForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.createFile = this.props.createFile.bind(this);
+  }
+
+  componentDidMount() {
+    this.fileName.focus();
+  }
+
+
+  render() {
+    const {
+      fields: { url },
+      handleSubmit,
+    } = this.props;
+    return (
+      <form
+        className="upload-file-by-url-form"
+        onSubmit={(data) => {
+          this.props.focusOnModal();
+          handleSubmit(this.props.uploadFileByURL)(data);
+        }}
+      >
+        <div className="upload-file-by-url-form__input-wrapper">
+          <label className="upload-file-by-url-form__url-label" htmlFor="url">
+            {this.props.t('UploadFileByURLForm.Label')}
+          </label>
+          <input
+            className="upload-file-by-url-form__url-input"
+            name="url"
+            id="url"
+            type="text"
+            placeholder={this.props.t('UploadFileByURLForm.Placeholder')}
+            ref={(element) => { this.fileName = element; }}
+            {...domOnlyProps(url)}
+          />
+          <Button
+            type="submit"
+            className="upload-file-by-url-form__submit"
+          >{this.props.t('UploadFileByURLForm.Submit')}
+          </Button>
+        </div>
+        {url.touched && url.error && (
+          <span className="form-error">{url.error}</span>
+        )}
+      </form>
+    );
+  }
+}
+
+UploadFileByURLForm.propTypes = {
+  fields: PropTypes.shape({
+    url: PropTypes.object.isRequired
+  }).isRequired,
+  handleSubmit: PropTypes.func.isRequired,
+  createFile: PropTypes.func.isRequired,
+  uploadFileByURL: PropTypes.func.isRequired,
+  focusOnModal: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired
+};
+
+export default withTranslation()(UploadFileByURLForm);